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来诠释他的技巧。这是隐藏滚动条的黑客攻击，我没有检查是否可以在所有主流浏览器上运行，但是它可以在Chrome和Firefox上运行。

Answer 2

你可以使用这个CSS属性。

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

Answer 3

我刚刚修改了我的CSS代码。这似乎帮助：

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

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