隐藏滚动条上溢：滚动已启用

我需要将滚动条隐藏在溢出的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

隐藏滚动条上溢：滚动已启用

回答

相关问题