how to hide scrollbar in html?

Question

I want to hide scrollbar, but at the same, i also want to have scrolling action i.e I want to hide scrollbar but still, want to scroll to see rest of content without actually seeing the scrollbar.

overflow: hidden won't work because after using that I cannot scroll to see the content.

how to do that using HTML/CSS/javascript?

I am working on styling scrollbar but I noticed there is no well-defined way to style scroll bar so I made custom scrollbar using divs with jQuery, but at the end, I have two scroll bar one which I made and other default scrollbar and now I want to hide default scroll bar.

I don't want to use -webkit- because it is not accepted in all browser.

I want to hide scroll bar in the following code.

  .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>

please anybody answer!

Possible duplicate of [Hide scroll bar, but still being able to scroll](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll) — Muthu Kumaran, Jul 29 '17 at 16:50
Or is this what you want? https://stackoverflow.com/questions/20447384/cant-hide-scrollbar-when-using-overflow-auto — Dennis, Jul 29 '17 at 16:53

score 2 · Answer 1 · answered Jul 29 '17 at 16:49

2

And overflow:auto; is out of the question?

It won't show if you don't need but does show when you do.

answered Jul 29 '17 at 16:49

Dennis

43
7

score 1 · Answer 2 · answered Jul 29 '17 at 16:49

1

You need to add the following styles:

#parent {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px;
}

Here is the working fiddle: http://jsfiddle.net/5GCsJ/954/

answered Jul 29 '17 at 16:49

P.S.

15,970
14
62
86

could you provide the solution with respect to my code? – Rahul Jul 29 '17 at 17:15

score 0 · Answer 3 · edited Jul 29 '17 at 21:50

0

Try this:

yourDiv::-webkit-scrollbar{
    width: 0px;
}

edited Jul 29 '17 at 21:50

xlm

6,854
14
53
55

answered Jul 29 '17 at 16:52

Kani Raj

106
1
6

1

Works only for webkit based browsers – Vivick Jul 29 '17 at 17:41

score 0 · Answer 4 · answered Jul 29 '17 at 16:54

0

Make your scroll bar transparent. You can do this by the following code.

    ::-webkit-scrollbar
    {
        width:0px;
    }
    ::-webkit-scrollbar-track-piece
    {
        background-color: transparent;
    }

Hope this will help you!

answered Jul 29 '17 at 16:54

Angela Amarapala

1,002
10
26

how to hide scrollbar in html?

4 Answers4