隱藏滾動條上溢：滾動已啓用

我需要將滾動條隱藏在溢出的div上：scroll;啓用，使div將鼠標和鍵盤滾動，但滾動條本身不會顯示。隱藏滾動條上溢：滾動已啓用

有沒有辦法做到這一點與CSS或是JavaScript的方式去？

2012-12-03 StephenJRomero

請不要更改或刪除用戶的標準UI元素，它只會惹惱他們。 – Damien

我認爲人們正在閱讀這個錯誤我不想隱藏身體滾動或任何默認的用戶界面。我設置了一個div來溢出：scroll;我想要功能溢出滾動給出了該div，但我不想顯示它隨附的滾動條。 – StephenJRomero

您可以將滾動div放入第二個div中，並將其隱藏起來，然後讓內部div更寬更高一些（但數量可能因瀏覽器而異）。

事情是這樣的：

#outer { 
    overflow:hidden; 
    width:200px; 
    height:400px; 
    border:1px solid #ccc; 
} 
#inner { 
    overflow:scroll; 
    width:217px; 
    height:417px; 
}

在http://jsfiddle.net/uB6Dg/1/完整的示例。

編輯： 不幸的是，你還可以得到滾動條通過突出顯示文本和拖動，並且它確實使填充等比這更痛苦的一點，但其他的我認爲JavaScript是要走的路。

來源

2012-12-03 13:46:13 Maloric

我與這一個去，因爲我首選使用CSS，但我可能會建議還添加StephanBönnemann的想法，並使用WebKit滾動條，因爲這會阻止它顯示，如果他們突出顯示內容 – StephenJRomero

我喜歡StephanBönnemann提出的解決方案，但不幸將其添加到以上意思是#inner在webkit瀏覽器中結束了17px太寬。我認爲斯蒂芬的解決方案是最優雅的webkit瀏覽器，而我的瀏覽器將提供兼容性，沒有類似的僞選擇器。 – Maloric

你可以用純CSS做到這一點（至少在webkit瀏覽器中）。您必須使用特殊的滾動條僞類來實現此目的

::-webkit-scrollbar { 
    display: none; 
}

閱讀此優秀blogpost瞭解更多信息。

來源

2012-12-03 13:46:37

太棒了，謝謝！ –

真的很棒。 – KULKING

-2

你需要利用jQuery插件從本網站http://jscrollpane.kelvinluck.com/

來源

2012-12-03 13:59:30 Shakeel

你不需要，但它是一個選項。 – steel

@Maloric答案指出我在正確的方向，但是我需要流體寬度，我也想上的寬度更準確滾動條。

這是一個函數，它將根據瀏覽器報告的內容返回滾動條的確切寬度。

var getWidth = function() { 
 
    var scrollDiv = document.createElement('div'), 
 
     scrollbarWidth; 
 

 
    scrollDiv.style.overflow = 'scroll'; 
 
    document.body.appendChild(scrollDiv); 
 

 
    scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 
 
    
 
    document.body.removeChild(scrollDiv); 
 

 
    return scrollbarWidth; 
 
}; 
 

 
var width = getWidth(); 
 
var container = document.querySelector('.overflowing-container'); 
 

 
container.style.paddingRight = width + 'px'; 
 
container.style.marginRight = (width * -1) + 'px'; 
 

 
// Just for testing purposes 
 
document.querySelector('.scrollbar-width').innerHTML = 'scrollbar height: ' + getWidth()

.container { 
 
    height: 200px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    width: 500px; 
 
} 
 

 
.overflowing-container { 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    width: 100%; 
 

 
}

<div class="container"> 
 
    <div class="overflowing-container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique feugiat metus, eget mollis nibh vestibulum eu. Nullam eros orci, gravida eu quam nec, maximus posuere dui. Maecenas erat magna, elementum eget nunc eget, tincidunt varius nisl. Phasellus pretium congue consectetur. Donec rutrum nisi sed eros posuere, vel pretium nunc viverra. Praesent consequat sagittis urna, quis convallis magna gravida et. In sed eleifend arcu. 
 

 
    Duis ornare condimentum est luctus malesuada. Morbi nec sodales nunc. Morbi vehicula tristique massa, nec lacinia tellus vulputate fringilla. Nam eget pulvinar libero. Vestibulum ligula mi, tincidunt ac pellentesque vitae, convallis eu tortor. Cras varius dolor sit amet libero rhoncus, mattis aliquet augue porttitor. Etiam sollicitudin, sem ut mollis imperdiet, erat enim gravida tortor, et imperdiet sem nibh in ex. Aliquam ac aliquam risus. Suspendisse gravida suscipit sapien, et ultrices massa ornare eget. Nulla venenatis pellentesque arcu at auctor. Sed libero ligula, pretium in metus a, malesuada ullamcorper leo. Vivamus tempor velit in ante fringilla rhoncus. Nam ac iaculis arcu. Mauris a nisi quis arcu feugiat posuere. 
 
    </div> 
 
</div> 
 

 
<div class="scrollbar-width"></div>

上述片段顯示了這個動作。

來源

2017-03-23 17:22:52

隱藏滾動條上溢：滾動已啓用

回答

相關問題