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