Create Vertical Live-Stream Bullet Comments with better-scroll
Last updated: 2021-05-01 01:12:18
Changelog:The better-scroll CDN link was broken, so all JavaScript files have been replaced with local files.
Last updated: 2020-05-05 22:39:33
better-scroll
better-scroll provides many flexible APIs. When implementing certain features based on better-scroll, these APIs come in handy. Understanding them helps you develop more complex functionality.
The best way to learn better-scroll is to explore its demo code, which is available in the example directory. Since Vue is currently one of the most suitable frontend MVVM frameworks for mobile development and works well with better-scroll, all demos have been rewritten using Vue.
1 2 3 4 5 6 7 8 | <div > <ul > <li>...</li> <li>...</li> ... </ul> <!-- Other DOM elements can be placed here without affecting scrolling --></div> |
In the code above, better-scroll is applied to the outer wrapper container, while the content element is the part that scrolls. Note that better-scroll only handles scrolling of the first child element (content) inside the container (wrapper). All other elements are ignored.
The simplest initialization code is as follows:
1 2 3 | import BScroll from 'better-scroll'let wrapper = document.querySelector('.wrapper')let scroll = new BScroll(wrapper) |
better-scroll provides a class whose first constructor parameter is a native DOM object. Of course, if you pass a string, better-scroll will internally attempt to call querySelector to retrieve the DOM object. Therefore, the initialization code can also be written as follows:
1 2 | import BScroll from 'better-scroll'let scroll = new BScroll('.wrapper') |