javascript - 隐藏带有溢出的滚动条：启用滚动

Question

我需要在具有溢出的 div 上隐藏滚动条：滚动；启用，以便 div 将使用鼠标和键盘滚动，但滚动条本身不会显示。

有没有办法用 css 做到这一点，或者 javascript 是要走的路？

Answer 1

你可以用纯 CSS 来做到这一点（至少在 webkit 浏览器中）。您必须使用特殊的滚动条伪类来实现这一点

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

阅读这篇出色的博文以获取更多信息。

Answer 2

您可以将滚动 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 是要走的路。

Answer 3

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

上面的代码片段显示了这一点。

Answer 4

您需要使用该站点http://jscrollpane.kelvinluck.com/中的 jquery 插件