How to determine whether the page has scroll bars through JS

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 a bit verbose and the code is not concise enough. Finally, by referring to different methods, I wrote a relatively simple method

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 position after overflow: hidden by determining whether there is a scroll bar.

How to determine whether there is a scroll bar

In fact, it only requires one line of JS. The test is compatible with IE7

function hasScrollbar() {
  return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}

Generally, you can use document.body.scrollHeight > window.innerHeight to judge.

But in IE7 and IE8, 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 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 of can be obtained. I will refer to 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;

}

The above is what I compiled Everyone, I hope it will be helpful to everyone in the future.

Related articles:

Improve ajax list request experience based on h5 history

Briefly talk about AJAX core objects

Detailed explanation of ajax data transmission method example

The above is the detailed content of How to determine whether the page has scroll bars through JS. For more information, please follow other related articles on the PHP Chinese website!