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 — Muthu Kumaran
– Muthu Kumaran, Commented Jul 29, 2017 at 16:50
Or is this what you want? stackoverflow.com/questions/20447384/… — Dennis
– Dennis, Commented Jul 29, 2017 at 16:53

Dennis · Accepted Answer · 2017-07-29 16:49:29Z

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, 2017 at 16:49

Dennis

437 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

P.S. · Accepted Answer · 2017-07-29 16:49:51Z

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, 2017 at 16:49

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

1 Comment

Rahul Over a year ago

could you provide the solution with respect to my code?

Angela Amarapala · Accepted Answer · 2017-07-29 16:54:33Z

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, 2017 at 16:54

Angela Amarapala

1,07210 silver badges26 bronze badges

Comments

xlm · Accepted Answer · 2017-07-29 21:50:01Z

0

Try this:

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

edited Jul 29, 2017 at 21:50

xlm

7,72415 gold badges59 silver badges60 bronze badges

answered Jul 29, 2017 at 16:52

Kani Raj

1061 silver badge6 bronze badges

1 Comment

Vivick Over a year ago

Works only for webkit based browsers

Collectives™ on Stack Overflow

how to hide scrollbar in html?

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related