How to Use jQuery Scrollify - Issues & Solutions

Tadashi Shigeoka ·  Thu, April 2, 2020

I’ll introduce how to use jQuery Scrollify, along with issues I encountered and their solutions.

jQuery Scrollify

Background

Helpful jQuery Scrollify Usage Articles

Issues with jQuery Scrollify

The systematic usage of jQuery Scrollify is explained in detail in the reference articles above, so this article focuses on issues I encountered while using it and their solutions.

Display Breaks on First Paint

❌ Case where display breaks on First Paint

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
</body>

✅ Case where display doesn’t break on First Paint

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
</head>

That’s all from the Gemba.