Jquery或纯js - 确定滚动条的宽度[重复]答案

【问题标题】：Jquery or pure js - determine the width of the scrollbar [duplicate]Jquery或纯js - 确定滚动条的宽度[重复]
【发布时间】：2023-04-06 14:16:01
【问题描述】：

我有一个垂直菜单，我正在尝试找到隐藏该区域滚动条但保持可滚动的最佳方法。通过 CSS 声明确切的大小（在大多数情况下为 17 像素），它可以很好地工作，但这对移动设备和其他设备没有帮助。

如何找到滚动条的确切大小（通过 jquery 或纯 js）并为 .scrollable-box 的填充和 .scrollable-inner 的负边距使用相同数量的 px？

jsfiddle

body {
    background: #eee;
    font-family: sans-serif;
}

div.sidebar {
    padding: 0;
    padding-bottom: 60px;
    border: 1px solid #ccc;
    background: #fff;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 280px;
    overflow: hidden;
    height:300px;
}
div#fixed {
    background: #76a7dc;
    padding-bottom: 10px;
    color: #fff;
    padding: 10px;
    text-align: center;
}

div.scrollable-box {
    height: 100%;  
    overflow-y: scroll;    
    width: 100%;
    padding-top:20px;
    padding-right: 17px;     
}

div.scrollable-inner {
    margin-right: -17px;
}

<div class="sidebar">
    <div id="fixed">
        Fixed content here       
    </div>

    <div class="scrollable-box">
      <div class="scrollable-inner">
        Scrolling content<br><br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

       </div>
    </div>
</div>

【问题讨论】：

如果你隐藏滚动条 - 你为什么要关心它的大小？
他通过将其推到可视区域之外来隐藏它，因此他需要知道将其推多远。

标签： javascript jquery html css

【解决方案1】：

我曾经在某个地方看到过这个，我记得 Gomes 想出了一个实现它的好主意

根据他的博客：

function getScrollBarWidth () {  
    var inner = document.createElement('p');  
    inner.style.width = "100%";  
    inner.style.height = "200px";  

    var outer = document.createElement('div');  
    outer.style.position = "absolute";  
    outer.style.top = "0px";  
    outer.style.left = "0px";  
    outer.style.visibility = "hidden";  
    outer.style.width = "200px";  
    outer.style.height = "150px";  
    outer.style.overflow = "hidden";  
    outer.appendChild (inner);  

    document.body.appendChild (outer);  
    var w1 = inner.offsetWidth;  
    outer.style.overflow = 'scroll';  
    var w2 = inner.offsetWidth;  
    if (w1 == w2) w2 = outer.clientWidth;  

    document.body.removeChild (outer);  

    return (w1 - w2);  
};

这对你很有帮助，如果你不明白他的代码，请告诉我。

链接：http://www.alexandre-gomes.com/?p=115

【讨论】：

【解决方案2】：

基于this，我找到了解决方案：

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);

$('div.scrollable-box').css('padding-right', scrollbarWidth);
$('div.scrollable-inner').css('margin-right',-scrollbarWidth);

Working jsfiddle

【讨论】：