HTMLを有効にしてdivの水平スクロールを有効にしますが、水平スクロールバーを非表示にします

Question

私のdivはスクロール可能にする必要があります。今それは正常に動作しますが、私は水平スクロールバーを非表示にしたいと思います。私はそれを無効にしたくない、単にそれを非表示にする。

私が見たいのは、ブラウザウィンドウ上の1つの垂直スクロールバーです。画面上に水平スクロールバーがありません。

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です。ジーンはスクロールバーを隠すためにコンテナの子にmargin-bottom: -17px;を置いたところでその答えを投稿しました。彼のテクニックをilustrateするのは簡単なjsFiddleでした。スクロールバーを隠すためのハックですが、すべての主要なブラウズでこの機能が動作しているかどうかはチェックしませんでしたが、クロムと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 */ 
}