logo标签列表

使用jQuery隐藏div滚动条，但保留滚动？

jquerycssscrollscrollbar
9

我想让一个div内能够滚动，但同时不显示实际的滚动条。

我需要用户使用滚轮来滚动。

有没有人有想法如何实现这个功能？

谢谢！

1
如果滚动条不见了，您希望如何滚动它？使用中键？点击拖动？在顶部或底部悬停？ - Kevin B
1
你可以使用CSS来实现这样的效果，嗯...http://jsfiddle.net/c7tR8/唯一的问题是当你看不到滚动条时，很难明显地知道div中还有更多的内容。 - Kevin B
1
以那种方式做事情，总感觉很不舒服...好像我错过了某些重要的东西。 - Kevin B
1
是的，这个一定需要设置高度才能正常工作。 - Kevin B
1
内部div需要与外部div具有相同的高度，否则它将无法正确滚动。如果需要，您可以在运行时使用JavaScript设置该高度。 - Kevin B
显示剩余5条评论
3个回答
12

好的，真正的原因是为什么您想要那样做，但既然您问了，我会尝试解决您的问题。

您需要两个 div 元素。一个嵌套在另一个中。

<div class="outside">
    <div class="inside">
        Scrolling Content Goes here.
    </div>
</div>

你需要一些CSS来帮助解决这种情况。overflow:auto将在超过高度限制时给您滚动条。出于示例的目的，我设置了一个随机宽度。在右侧添加填充以将滚动条推出.outer div类。这样，您就不必担心内容会进入.outer div下方。

.inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; }

对于外部类，您需要指定相同的高度和宽度，但是overflow:hidden。

.outside { width: 500px; height: 300px; overflow: hidden; }

例子: jsFiddle

在不同的缩放级别下，这一点并不一致 - 滚动条的宽度通常会随着缩放级别的变化而改变，因此对于（一些非常奇怪的）浏览器设置来说，滚动条可能会变得可见。另外，与过分笨拙的缩放相比，不同的浏览器将具有不同宽度的滚动条，使其不够普遍。 这确实是如此晦涩难懂，以至于没有人（通常需要）去担心它，但我只是想指出这一点。 - lindhe
0

这个在IE和Firefox中进行了测试 - 两者都处理填充略有不同，因此我使用高度和宽度来考虑内容可见性。

拥有2个容器是有意义的 - 一个用于容器，另一个用于内容，但由于浏览器处理填充方式不同，将滚动条推入隐藏区域比你想象的要困难得多。这就是第三个容器的作用：

  • 一个容器用于没有滚动条的父级尺寸
  • 一个包含被推入隐藏区域的滚动条的容器
  • 一个具有正确宽度设置的内容容器

这是通过样式表技巧实现的 - 样式表已经被注释，所以您可以按照其中的说明/注释进行操作。

希望这有所帮助！ :)

<html>
<head>
    <style type="text/css">
    /* Propetary paragraph style */
    p {
        padding: 0px;
        margin: 0px 0px 7px 0px;
    }
    /* Global notes:
       - Since the 
    /* This is the outer container - set desired height and width here */
    .scrollabelDivContainer {
        width: 300px;
        height: 100px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        border: 2px dashed #ddd;
    }
    /* This is the div inside the container - the height should 
       match the container and width be more (to push the 
       scrollbar into the hidden content area) */
    .scrollableDiv {
        width: 400px;
        height: 100px;
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    /* This houses the content.  Set the widget 10px less than the 
       container width to ensure the content is visible in all browsers */
    .scrollableDivContent {
        width: 290px;
        padding: 0px;
        margin: 0px;
        overflow: auto;
    }
    </style>
</head>

<body>
    <div class="scrollabelDivContainer">
        <div class="scrollableDiv">
            <div class="scrollableDivContent">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt consequat urna ut tincidunt. Vestibulum molestie leo quis dui malesuada vulputate eget tempor purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec orci enim, vel tristique lectus. Sed lobortis ultrices enim eu consequat.</p>
                <p>Integer magna lectus, iaculis sit amet interdum nec, ullamcorper ut purus. Sed aliquam sollicitudin lacinia. Proin porttitor aliquet lorem, eu dictum lorem suscipit et. Ut vestibulum eros quis turpis auctor id sollicitudin risus faucibus. Quisque volutpat nibh ut sem euismod rutrum. Ut eget orci non quam scelerisque laoreet sit amet a metus. Mauris aliquam facilisis lacinia.<p>
            </div>
        </div>
    </div>
</body>

</html>
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接