javascript - 存在滚动条时，为什么 clientWidth 和 offsetWidth 的值相同？

Question

https://javascript.info/task/scrollbar-width这是我遇到过的最令人沮丧的问题之一。提供的链接显示了如何通过从 offsetWidth 中减去 clientWidth 来获取滚动条宽度。但是我得到的宽度相同!我试过 firefox 和 chrome。浏览器未放大。存在滚动条。我在另一个元素中尝试了它并得到了相同的结果。请告诉我我错过了什么。

$(".searchEvents").click(function(){
    var div = document.querySelector('.main-container');
//        let scrollWidth = div.offsetWidth - div.clientWidth;

        alert(div.offsetWidth);
        alert(div.clientWidth);
           });   

Answer 1

试试这个。

JsFiddle 链接:Click me

function getScrollbarWidth() {

  // Creating invisible container
  const outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);

  // Creating inner element and placing it in the container
  const inner = document.createElement('div');
  outer.appendChild(inner);
  
  // Calculating difference between container's full width and the child width
  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);

  // Removing temporary elements from the DOM
  outer.parentNode.removeChild(outer);

  return scrollbarWidth;
    
}

document.body.innerHTML = 'Scrollbar width is: ' + getScrollbarWidth() + 'px';