Summary of js/jQ methods for implementing scroll bar effects

There was an article before"Summary of settings related to scroll bars on HTML pages", which mainly talks about how to set the scroll bar style, color, etc. through css. Today I will summarize how to set it through JS/JQ Scroll bar:

1.Example of using jQuery to achieve the effect of adding a three-dimensional digital scroll bar

Jquery realizes the effect of adding a three-dimensional digital scroll bar. The code is divided into two parts. Part of it is an html structure and the other part is a js code segment. Friends in need can refer to it!

2.js implements a simple vertical scroll bar

This article mainly introduces the sample code of js implementing a simple vertical scroll bar, with Very good reference value, let’s take a look with the editor below

3. Code case sharing of native js encapsulation of custom scroll bars

This article mainly introduces the relevant knowledge of native js encapsulation of custom scroll bars. Has very good reference value. Let's take a look at it with the editor

Recently there was a project about making an online music player, which required the use of a scroll bar, but the built-in scroll bar was too ugly, so I thought about it myself. Custom scroll bars.

4.Use jquery to prohibit the scrolling of the outer scroll bar

Normally, when the inner scroll bar scrolls to both ends When scrolling, the outer scroll bar will scroll with it; but sometimes we hope that the user can only scroll the current area without triggering the outer (window) scroll bar. Only after leaving the current area can the outer scroll bar be scrolled. strip. Because the user may accidentally scroll too far, causing the current area to leave the visible area.

5.jquery method to determine whether the scroll bar has reached the bottom or top

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的

To get the top, you only need to get scrollTop When ()==0, it is the top;

To get the bottom, just get scrollTop()>=$(document).height()-$(window).height() to know Scroll to the bottom;

The above is the detailed content of Summary of js/jQ methods for implementing scroll bar effects. For more information, please follow other related articles on the PHP Chinese website!