HTML and enable div's horizontal scrolling but hide the horizontal scrollbar

Question

I need my div to be scrollable. Now it works fine, but I would like to hide the horizontal scrollbar. I do not want to disable it, just hide it.

All I want to see is one vertical scrollbar on the browser window. No horizontal scrollbars on the screen.

No JavaScript/jQuery allowed. I need a cross-browser solution.

 #kaaviopohja { width: 100%; overflow: hidden; background-color: yellow; } #kaaviotaulukko { width: 100%; overflow-x: scroll; padding-bottom: 17px; background-color: pink; } 

 hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br /> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br /> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br /> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br /> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br /> <DIV id="kaaviopohja"> <div id="kaaviotaulukko" style="white-space: nowrap; position: relative; text-align: center;"> <div style="display:inline-block"> <!-- --> <DIV STYLE="DISPLAY:INLINE-BLOCK"> <div style="float:left;width:0"> <div id="navi7"> <div style="z-index:100;position:fixed;left:0;top:0;bottom:0;max-height:1em;margin:auto;">A</div> <div style="z-index:100;position:fixed;right:0;top:0;bottom:0;max-height:1em;margin:auto;">B</div> </div> </div> <div class="krs" style="display: inline-block; vertical-align: top; width: 300px;"> <div> <h3>LQsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</h3> </div> 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> </div> </DIV> <!-- --> <div style="float: right; width: 0;"> <div id="navi100"> <div style="z-index: 100; position: fixed; left: 0; top: 500px">C</div> </div> </div> <!-- --> <div style="z-index:99;width:70px;position:fixed;left:0;top:0;bottom:0;margin:auto;background-color:red;"><br /> </div> <div style="z-index:99;width:70px;position:fixed;right:0;top:0;bottom:0;margin:auto;background-color:red;"><br /> </div> </div> </div> </DIV> 

Answer 1

There's a similar question Hide scroll bar, but still being able to scroll , but I believe your question is focused on the horizontal scrollbar. In that other question, I found something that can help you, this answer . Jean posted that answer where he puts margin-bottom: -17px; in the container's child to hide the scrollbar.I did a simple jsFiddle to ilustrate his technique. It's a hack to hide the scrollbar, I didn't check if this work on all major browses but it works on chrome and firefox.

Answer 2

You can use CSS properties for this.

overflow-x: hidden; /* hide horizontal scrollbar */
overflow-y: scroll; /* show vertical scrollbar */

Answer 3

I just modified my CSS code. This seems to help:

#kaaviotaulukko {
  width: 100%;
  overflow-x: scroll;
  padding-bottom: 17px;
  background-color: pink;

  margin-top: -17px; /* this was added */
  top: 17px; /* this was added */
}