Is there a way to hide the scrollbar while still allowing scrolling functionality? I've tried using overflow: hidden but it prevents me from scrolling to see the content.
How can I achieve this using HTML/CSS/JavaScript?
I attempted to style the scrollbar with no luck, so I created a custom scrollbar using divs and jQuery. However, now I have two scrollbars - one custom and one default. How do I hide the default scrollbar?
I want to avoid using -webkit- due to browser compatibility issues.
I am trying to hide the scrollbar in the code below:
.container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 6000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 300px;
background-color: teal;
height: 2000px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 6000px;
display: inline-block;
box-sizing: border-box;
}
.page{
width: 100%;
height: 100%;
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
</div>
</div>
</div>
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>If you have any solutions, please share!