jquery 隐藏溢出的滚动条:启用滚动

eni9jsuy  于 2023-08-04  发布在  jQuery
关注(0)|答案(5)|浏览(150)

我需要隐藏一个有溢出的div上的滚动条:scroll;启用,这样div将使用鼠标和键盘滚动,但滚动条本身不会显示。
有没有一种方法可以用css或者JavaScript来实现呢?

c6ubokkw

c6ubokkw1#

你可以用纯CSS来实现这一点(至少在webkit浏览器中)。您必须使用特殊的ScrollBar伪类来实现这一点

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

字符串
阅读这篇优秀的blogpost以了解更多信息。

pn9klfpd

pn9klfpd2#

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

stszievb

stszievb3#

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

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

3z6pesqy

3z6pesqy4#

将滚动条的宽度设置为无:

scrollbar-width: none;

字符串

nr7wwzry

nr7wwzry5#

你需要使用jquery插件从这个网站http://jscrollpane.kelvinluck.com/

相关问题