9

我试图能够在一个 div 内滚动，但不显示实际的滚动条。

我需要用户能够使用滚轮滚动

有人对我如何做到这一点有想法吗？

谢谢！

4

3 回答 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; }

对于外部类，您需要指定相同的高度、相同的宽度，但溢出：隐藏。

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

示例：jsFiddle

于 2012-08-29T20:49:17.170 回答
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>
于 2012-08-29T21:15:22.533 回答
0

也许您可以使用 css 并隐藏或对其进行一些样式设置，使其看起来隐藏。这是我找到的一些链接。

http://css-tricks.com/custom-scrollbars-in-webkit/

http://www.yourhtmlsource.com/stylesheets/scrollbars.html

于 2012-08-29T20:46:49.293 回答