JS capture page scroll bar

php中世界最好的语言
Release: 2018-04-20 09:24:42
Original
1942 people have browsed it

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

precautions for js to capture the page scroll bar? following is a practical case, let’s take look. <>

Preface

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

The need to judge the scroll bar is often used in pop-up window plug-ins, because most pop-up windows will add

overflow: hidden attribute. If the page is relatively long, the page will shake after adding this attribute.

In order to enhance the user experience, add the

margin-left attribute to offset the scroll bar afteroverflow: hidden by determining whether there is a scroll bar. location. < code>>

How to determine whether there is a scroll bar

In fact, only one line of JS is needed to test compatibility with IE7

function hasScrollbar() { return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); }
Copy after login
Generally, use

document.body.scrollHeight>window.innerHeight can be judged. < code>>

But in IE7 and IE8,

window.innerHeight is < code> underfined , so in order to be compatible with IE7 and IE8, you need to usedocument.documentElement.clientHeight property calculates window height. < code>> >

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 reasonable

margin-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

offsetWidth

and clientwidth of the element. the difference < code> can be obtained. i will learn from 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; }
Copy after login

Summary

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

precautions for js to capture the page scroll bar? following is a practical case, let’s take look. <>, maybe ten lines of logical judgment may only require one line. I have been deeply impressed recently, and I must be good at using ternaryexpressionsif..elseThe principle is to judge whether the document height is greater than the

visual area

height.

Recommended reading:

Detailed explanation of the three types of $() in jQuery


How to choose the jQuery version


The above is the detailed content of JS capture page scroll bar. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!