Home > Article > Web Front-end > JS capture page scroll bar
This time I will bring you JS to capture the page scroll bar. What are the precautions for JS to capture the page scroll bar? The following is a practical case, let’s take a look.
Recently, in the process of writing a plug-in, I need to use JS to determine whether there is a scroll bar. After searching, the general methods are similar, but they are all a bit verbose and the code is not concise enough. Finally, by referring to different methods, I wrote a relatively simple methodPreface
In the process of writing a plug-in recently, I need to use JS to determine whether there is a scroll bar. Search After a while, the general methods are similar, but they are a bit verbose and the code is not concise enough. Finally, by referring to different methods, I wrote a relatively simple method. When judging the scroll bar, you also need to calculate the width of the scroll bar. I will share it with you through this article. Why should we judge the scroll bar overflow: hidden attribute. If the page is relatively long, the page will shake after adding this attribute.
margin-left attribute to offset the scroll bar after
overflow: hidden by determining whether there is a scroll bar. Location.
How to determine whether there is a scroll bar
In fact, only one line of JS is needed to test compatibility with IE7function hasScrollbar() { return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); }Generally, use
document.body.scrollHeight >
window.innerHeight can be judged.
window.innerHeight is
underfined, so in order to be compatible with IE7 and IE8, you need to use
document.documentElement.clientHeight Property calculates window height.
The method of calculating the scroll bar width
still takes the pop-up window as an example, because the scroll bars of IE 10 and above and mobile browsers do not occupy the page width. Transparent style (IE 10 and above browsers can restore the original scroll bar style through CSS properties), so in order to further enhance the user experience, we also need to calculate the width of the scroll bar and add a reasonablemargin-left ## according to the situation. #Value.
The method to calculate the width of the scroll bar is relatively simple. Create a new p element with a scroll bar and pass the
and clientWidth of the element. The difference of
can be obtained. I will learn from the method in Magnific-popup
function getScrollbarWidth() {
var scrollp = document.createElement("p");
scrollp.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
document.body.appendChild(scrollp);
var scrollbarWidth = scrollp.offsetWidth - scrollp.clientWidth;
document.body.removeChild(scrollp);
return scrollbarWidth;
}
Use JS to implement a The function may not be difficult, but as programmers, you should always think about how to implement this function more simply and elegantly, and always focus on improving the user experience. For
conditional judgment, maybe ten lines of logical judgment may only require one line. I have been deeply impressed recently, and I must be good at using ternary expressions instead of if..else to simplify the code. The principle is to judge whether the document height is greater than the
height. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the three types of $() in jQueryHow to choose the jQuery version Summary of tips for H5 designThe above is the detailed content of JS capture page scroll bar. For more information, please follow other related articles on the PHP Chinese website!