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>

You want the overflowing text to be hidden and you can't scroll to it? Or you want it to break so you can see the rest of the text without having to scroll? — Michael Coker, Jun 05 '17 at 16:23
If I scroll horizontally with my mouse wheel, I want to see the rest of the text. The text cannot be wrapped. — xms, Jun 05 '17 at 16:32
So you want to scroll, you just want the scrollbar to be hidden? Pretty sure that's impossible. — Michael Coker, Jun 05 '17 at 16:44
@MichaelCoker This is my best try so far: [link](https://stackoverflow.com/a/44374054/5833180) — xms, Jun 05 '17 at 17:07

score 1 · Accepted Answer · answered Jun 05 '17 at 17:13

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.

score 0 · Answer 2 · answered Jun 05 '17 at 16:07

0

You can use CSS properties for this.

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

answered Jun 05 '17 at 16:07

Ezenhis

997
9
14

If I use `overflow-x: hidden;` then the div is not scrollable horizontally. In other words, that is not want I want. – xms Jun 05 '17 at 16:14
doesn't it scroll with arrows when being the active element? Edit: no, it doesn't - ignore this. – Ezenhis Jun 05 '17 at 16:26
or do you want the scrollbar to be transparent but still draggable? – Ezenhis Jun 05 '17 at 16:27
Yes, horizontal scrollbar needs to be transparent or invisible. With all browsers. – xms Jun 05 '17 at 16:33
this (https://jsfiddle.net/btvvfjbp/) should work with Chrome but I think that Firefox doesn't have the equivalent.. (according to https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox) – Ezenhis Jun 05 '17 at 16:37

score 0 · Answer 3 · answered Jun 05 '17 at 17:06

0

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 */
}

answered Jun 05 '17 at 17:06

xms

429
5
24

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

3 Answers3