Jquery或純js - 確定滾動條的寬度

我有一個垂直菜單，我試圖找到隱藏該區域的滾動條但保持滾動的最佳方式。它通過CSS聲明確切的尺寸，在大多數情況下是17px，但這對手機和其他設備沒有幫助。Jquery或純js - 確定滾動條的寬度

如何找到滾動條的確切大小（通過jquery或純js），並使用相同數量的px填充.scrollable-box和負邊距.scrollable-inner？

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>

來源

2017-05-26 Jacksonfive

如果隱藏滾動條 - 你爲什麼要關心它的大小？ – Dekel

他通過將它推到可視區域之外來隱藏它，所以他需要知道要推多遠。 –

有一次，我看到這個地方，我記得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

來源

2017-05-26 12:07:53

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

來源

2017-05-26 13:25:31 Jacksonfive

Jquery或純js - 確定滾動條的寬度

回答

相關問題