To determine whether there is a need for scroll bars is used in popover plug-ins, because most pop-ups will add overflow: hidden property, if the page is more than one screen, after adding this property, the page will shake.

To enhance the user experience, add the margin-left property to offset the scroll bar position after overflow: hidden by determining whether there is a scroll bar.

// Determine the vertical scroll bar
element.scrollHeight > element.clientHeight;
Copy the code
// Determine the horizontal scroll bar
element.scrollWidth > element.clientWidth;
Copy the code

A special case

When an element specifies overflow: hidden, the scrollbar does not appear, so you need to determine whether overflow: hidden is applied to the element.

// Wrap the function
function hasScrolled(ele, dir = "vertical"){
  // Check whether the direction is set to overflow: hidden
  let style = window.getComputedStyle(ele);
  if( (dir == "vertical" && style.overflowY == "hidden") 
     ||
      (dir == "horizontal" && style.overflowX == "hidden"))return false;
  
  // After judging overflow is not hidden, then judging by two properties.
  if(dir == "vertical") {return (ele.scrollHeight > ele.clientHeight);
  }else{
    return (ele.scrollWidth > ele.clientWidth);
  };
};
Copy the code

ScrollWidth > ele. ClientWidth; scrollWidth > ele.

<div class="box">
  <h1>Inside the child element</h1>
</div>

<script>
    let box = document.querySelector(".box");

    console.log("scrollHeight: " + box.scrollHeight) // scrollHeight: 63
    console.log("clientHeight: " + box.clientHeight) // clientHeight: 42
    console.log("Do you have a scroll bar?", box.scrollHeight > box.clientHeight) // Whether there is a scroll bar: true
</script>
Copy the code
// The best way to do this is:
function hasScrolled(ele, dir = "vertical"){
  let eleScroll = dir == "vertical" ? "scrollTop" : "scrollLeft";
  
  letresult = !! ele[eleScroll];// Check whether the scroll value is 0 or some other value
  // If it is any other value (non-0), this indicates that there is a scrollbar
  // If it is 0, try to move the scroll bar to see if it can move
  if(! result){ ele[eleScroll] =1; // Try to move the scroll barresult = !! ele[eleScroll];// Check the value again
    ele[eleScroll] = 0; // Restore the original position
  };
  
  return result; // Get the result
};
Copy the code

A method for calculating the width of a scrollbar

Since the scrollbars of mobile browsers are transparent and do not occupy the page width, in order to further enhance the user experience, we need to calculate the width of the scrollbars and add a reasonable margin-left value according to the situation

// To calculate the scrollbar width, create a new DIV element with a scrollbar and calculate the difference between offsetWidth and clientWidth.
function getScrollbarWidth() {

    var scrollDiv = document.createElement("div");
    scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px; ';
    document.body.appendChild(scrollDiv);
    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
    document.body.removeChild(scrollDiv);

    return scrollbarWidth;
};
Copy the code