Using jQuery to hide div scrollbar, but retain scr

2019-02-07 00:59发布

站内问答 / jQuery
870 3 4

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 anyone have ideas as to how I can accomplish this?

Thanks!

3条回答
Bombasti
2楼-- · 2019-02-07 01:14

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) 举报
放我归山
3楼-- · 2019-02-07 01:35

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) 举报
老娘就宠你
4楼-- · 2019-02-07 01:37

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)