Build Your Own Page Scrolling Effects With Roll.js

综合技术 Hongkiat (源链)

You can find dozens ofscrolling libraries all over the web. Most are written in JavaScript and have their own effects you can restyle for single page layouts, on-scroll animations, and so much more.

But what about coding your own scrolling effects ? Or what if you just want a simple way of tracking how far down the page a user has scrolled?

Roll.js is the library you’re looking for. This open source script is crazy small and super easy to use . You can get this working with a few lines of JavaScript. And best of all it doesn’t force you to perform anything specific, but rather gives you the tools to create your own custom scrolling features.

Read Also: JavaScript Libraries for Cool Scrolling Effects


The goal of this library is to help developers structure their scrolling effects without much effort.

If you take a look at the main GitHub repo you’ll find a whole setup guide with a few example snippets. You can run functions to call how far the user scrolls , or to different “panes” on the page.

These work best onsingle-page layouts but you can use Roll.js for so much.

With a single function call you can pull data with each scroll that includes:

  • Total page steps(if applicable).
  • Total % scrolled down page.
  • Current position on page in pixels.
  • Total viewport height based on device size.

This also works with jump links that bring users down (or up) to certain parts of the page.

But you can find a lot of these features in other libraries as well. What makes Roll.js so special?

Part of it is the syntax, but the big seller here is the total library size of 8KB when minified. That’s pretty darn small for such a detailed scrolling library!


You can see how this works on the main demo page and you can even download the Roll.js source code to dig into those demos yourself .

Everything from the live demos and the raw library files can be pulled from GitHub and they’re super easy to work with.

But if you have any questions, suggestions, or wanna share your thanks for the awesome library, you can shoot a message over to the creator @williamngan .

您可能感兴趣的

Introduction to Functional Programming in JavaScri... Inpart 1, we had learned about two important concepts in functional programming paradigm: immutable data and pure function. Now, we will learn anothe...
React Advanced 备忘 整个生命周期的钩子函数流程如下图: 在这里重点讲一下 shouldComponentUpdate ,无论是组件的属性发生变化还是状态发生改变都会执行 render 方法,在 render 执行之前要先执行 shouldComponentUpdate 判断一下是否需要更新,并...
The asynchronized request node.js with ... Is it possible, in node.js, to make an asynchronous call that times out if it takes too long (or doesn't complete) and triggers a default callback? ...
Parsing data part 4: Parsing the Easter Bunny with... In this post, as an example of using minilexer , I’ll parse the stanford bunny 3D object into an R data structure and display it. ...
正则基本入门 以前看了许许多多的正则教程,收货并不多,往往都是蜻蜓点水,一点就过。事实上,正则用处真的超级大,比如匹配innerHTML的内容,以及表单验证,也是非他莫属。这里,我结合js,对正则进行一个简单的介绍吧。 如有纰漏欢迎指出,希望大家多多包涵。 js与正则的关系 在js中定义一个正则有两种方法...
责编内容来自:Hongkiat (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » Build Your Own Page Scrolling Effects With Roll.js



专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录