Using jQuery to hide div scrollbar, but retain scrolling?
Question
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 answers
solution1
12 ACCPTED 2012-08-29 20:49:17
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
solution2
0 2012-08-29 20:46:49
Maybe you can use css and hide or do some styling with it so it looks hidden. Here's one some links I found.
solution3
0 2012-08-29 21:15:22
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 #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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.