Question

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

有没有办法用css做这个或者javascript的方式去哪儿？

Answer 1

您可以使用纯CSS（至少在webkit浏览器中）执行此操作。您必须使用特殊的滚动条伪类来实现此

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

阅读此优秀blogpost以获取更多信息。

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的答案指出了我正确的方向，但是我需要流体宽度，而且我还希望在滚动条的宽度上更准确。

这是一个函数，它将根据浏览器报告的内容返回滚动条的确切宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 4

您需要使用此网站http://jscrollpane.kelvinluck.com/

中的jquery插件

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

4 个答案: