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

Background

• GitHub: lukehaas/Scrollify: A jQuery plugin that assists scrolling and snaps to sections.
• Demo Site: jQuery Scrollify Demo

Helpful jQuery Scrollify Usage Articles

• スクロールをセクションごとに制御するプラグイン「jQuery Scrollify」を詳しく解説！ – WEBDESIGNDAY
• 簡単に画面いっぱいの縦スクロールページが作れるScrollifyの使い方 | 東京のWeb制作会社LIG

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

• https://cdnjs.com/libraries/jquery
• https://cdnjs.com/libraries/scrollify

❌ 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.