Question

我有一个垂直菜单，我试图找到隐藏该区域滚动条但保持其可滚动的最佳方法。它通过CSS确定确切的大小，在大多数情况下是17px，但这对移动设备和其他设备没有帮助。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 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);  
};

这可以真正帮助您，如果您不理解他的代码，请告诉我。

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

Answer 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

Jquery或纯js - 确定滚动条的宽度

2 个答案: