Hi everyone,
I need to hide the scrollbar on a div that has overflow:scroll; enabled so that the div will scroll with mouse and keyboard but the scrollbar itself will not be displayed.
Is there a way of doing this with css or is javascript the way to go?
So, there are a few ways to approach this. I think the easiest way is to create use two divs. The approach here is to make the outer div's width less that that of the inner div so that the scrollbar wont show on the screen. While you can set the outer div's width via CSS, because of differences in browsers, I think using javascript is going to be a better option to ensure that slight differences in browsers produce the same result. If you are concerned about JavaScript not being enabled on the browser, you could just add a width to the outer div in CSS as a backup.
the JavaScript code below simply gets the width of the inner div minus the scrollbar, then assigns that value to the outer div (wrapper).
Here is a sample.
<!DOCTYPE html>
<html>
<head>
<title>No Scrollbar Demo</title>
<style>
#wrapper {border:1px solid #7f7f7f;overflow: hidden;}
#content {border:none;overflow-y:scroll;width:500px;height:250px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum laoreet dui, ut ornare nisi pellentesque sed. In vel neque odio, et viverra augue. Quisque felis nisl, sodales eu sagittis eget, sagittis ac elit. Nunc eleifend lacinia vulputate. Donec ut lectus ante. Nulla facilisi. Nunc in eros est. Pellentesque in lectus vel diam sagittis venenatis ut ac sem. In ipsum dui, cursus at aliquam et, sagittis id augue. In scelerisque, odio in scelerisque dignissim, sapien lectus imperdiet erat, feugiat fermentum enim sem ut enim. Donec convallis hendrerit congue. Integer vestibulum, enim sed porttitor porta, tellus velit congue sem, rutrum sollicitudin velit ipsum vel nulla. Praesent eget purus eget est sollicitudin sollicitudin. Suspendisse a risus lorem, nec condimentum est. Vestibulum diam augue, eleifend ac ornare et, cursus vel lectus. Nam at orci ac enim volutpat rutrum eget at orci.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. In gravida gravida urna volutpat mollis. Integer non neque at nisi sagittis accumsan et ac mi. Sed tempor sodales magna ac malesuada. In placerat mattis neque eget suscipit. Vivamus at ante risus, a gravida enim.</p>
<p>Phasellus rhoncus tempor magna, a aliquam leo ultricies ac. Donec faucibus ipsum massa. Nam interdum mi eget erat varius non malesuada risus sollicitudin. Phasellus ut semper lorem. Curabitur a quam mi. Vestibulum libero justo, bibendum eget tristique quis, euismod sed nisi. Aliquam erat volutpat. Fusce enim sem, mollis et condimentum sagittis, mollis quis odio. Nunc elementum sapien a magna mollis vestibulum. Ut ligula ipsum, elementum tincidunt.</p>
</div>
</div>
<script>
var contentWidth=document.getElementById("content").scrollWidth;
document.getElementById("wrapper").style.width = contentWidth + 'px';
</script>
</body>
</html>
It's work, thank you for help :)
Glad to hear this solved your question.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.