Question

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

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

有没有人有关于如何实现这一目标的想法？

谢谢！

Answer 1

嗯，真正的原因是你想要的原因，但是因为你问我会尝试解决你的问题。

你需要两个div。一个嵌套在另一个里面。

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

然后你需要一些CSS来帮助解决这个问题。溢出：auto会在超过高度限制时为您提供滚动。为了这个例子我放了一个随机宽度。在右侧推一个填充物，将滚动条推出.outer div类。这样您就不必担心.outer div下的内容了。

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

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

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

示例：jsFiddle

Answer 2

也许您可以使用css并隐藏或使用它做一些样式，因此它看起来是隐藏的。这是我发现的一些链接。

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

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

Answer 3

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

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

3 个答案: