Using jQuery to hide div scrollbar, but retain scrolling?

后端未结

关注

 3  459

陌清茗

I am trying to be able to scroll inside one div but without showing the actual scrollbar.

I need the user to be able to scroll using the scrollwheel

Does any

相关标签:

3条回答

旧时难觅i

2020-12-31 15:43
Well, the real reason would be why you would want that, but since you asked I will try and solve your issue.

You will need two divs. One nested inside the other.
```
<div class="outside">
    <div class="inside">
        Scrolling Content Goes here.
    </div>
</div>
```
You will then need some CSS to help this situation out. The overflow:auto will give you the scrolling once it goes past the height limitations. I put on an random width for sake of the example. Putt a padding on the right hand side to push the scroll bar out of the .outer div class. This way you won't have to worry about the content going under the .outer div.
```
.inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; }
```
for the outer class you will need to specify the same height, same width, but overflow:hidden.
```
.outside { width: 500px; height: 300px; overflow: hidden; }
```
EXAMPLE: jsFiddle
0 讨论(0)
发布评论:

提交评论
- 加载中...
野趣味

2020-12-31 15:48

Maybe you can use css and hide or do some styling with it so it looks hidden. Here's one some links I found.

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

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

花落未央

2020-12-31 15:48

This was tested in IE and Firefox - both handle padding a little differently, so I am using height and width to account for content visibility.

It makes sense to have 2 containers - one for the container and one for the content, however since browsers handle padding differently, it's a lot harder than you think to push the scrollbar into the hidden area. This is where the third container comes in:

One container for the parent dimensions without scrollbars
One container that contains the scrollbar which is pushed into the hidden area
One container that houses the content with the correct width set

This is accomplished through stylesheet tricks - the stylesheet has been commented so you can follow the instructions / comments in there.

Hope this helps! :)

<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 #ffffd;
    }
    /* 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 讨论(0)