HTML 并启用 div 的水平滚动但隐藏水平滚动条

Question

我需要我的 div 可以滚动。现在它工作正常，但我想隐藏水平滚动条。我不想禁用它，只是隐藏它。

我只想在浏览器窗口中看到一个垂直滚动条。屏幕上没有水平滚动条。

不允许使用 JavaScript/jQuery。我需要一个跨浏览器的解决方案。

#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

有个类似的问题Hide scroll bar, but still being able to scroll ，但我相信您的问题集中在水平滚动条上。在另一个问题中，我找到了可以帮助你的东西，这个 answer . Jean 在他将 margin-bottom: -17px; 放在容器的子项中以隐藏滚动条的地方发布了该答案。我做了一个简单的 jsFiddle来说明他的技术。隐藏滚动条是一种 hack，我没有检查它是否适用于所有主要浏览器，但它适用于 chrome 和 firefox。