オーバーフローでスクロールバーを非表示にする方法：scroll CSS

Question

スクロール可能なdivにする必要がありますが、ここではスクロールバーが非表示になっています。助けてくれてありがとう。私はこれを発見し、試してみましたが、動作しているようですしないhttp://jsfiddle.net/5GCsJ/954/

CSS

.bg_info_profile .bg_profile_right { 
    background: white; 
    float: right; 
    width: 50%; 
    height: 670px; 
    border: 1px solid green; 
    overflow: hidden; 
} 
.bg_info_profile .bg_profile_right .conatiner_hidden_scroll_2 { 
    width: 100%; 
    height: 99%; 
    border: 1px solid blue; 
    overflow: auto; 
    padding: 50px; 
} 
.bg_info_profile .bg_profile_right .conatiner_hidden_scroll_2 .container_center { 
    text-align: center; 
    margin-top: 30px; 
} 
.bg_info_profile .bg_profile_right .conatiner_hidden_scroll_2 .container_center .profile_img_pentagon { 
    width: 150px; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    position: relative; 
} 
.bg_info_profile .bg_profile_right .conatiner_hidden_scroll_2 p { 
    margin-top: 50px; 
    text-align: center; 
} 

HTML

<div class="bg_info_profile"> 
    <div class="bg_profile_left"> 
     asdfas dfasdf asdf asdfasdfas dfasdfas dfasdfasdf 
     asdfasdfasdfa sdfasdfasdfas dfasdfasdfa sdfasdf 
     asdfasd fasdfasdf asdfasdf asdfasdfa sdfasdfasdf 
     asdf asdfasdfa sdfasdfasdfa sdfasdfasd fasdfasdf     
     asdfas dfas dfasd fasdfasdfasd fasdfa sdfa sdfasdf 
    </div> 
    <div class="bg_profile_right"> 
     <div class="conatiner_hidden_scroll_2"> 
      <div class="container_center"> 
       <!-- Some code --> 
      </div> 
      <p></p> 
      <p>asdfas dfasdf asdf asdfasdfas dfasdfas dfasdfasdf 
      asdfasdfasdfa sdfasdfasdfas dfasdfasdfa sdfasdf 
      asdfasd fasdfasdf asdfasdf asdfasdfa sdfasdfasdf 
      asdf asdfasdfa sdfasdfasdfa sdfasdfasd fasdfasdf     
      asdfas dfas dfasd fasdfasdfasd fasdfa sdfa sdfasdf</p> 
      <p>asdfas dfasdf asdf asdfasdfas dfasdfas dfasdfasdf 
      asdfasdfasdfa sdfasdfasdfas dfasdfasdfa sdfasdf 
      asdfasd fasdfasdf asdfasdf asdfasdfa sdfasdfasdf 
      asdf asdfasdfa sdfasdfasdfa sdfasdfasd fasdfasdf     
      asdfas dfas dfasd fasdfasdfasd fasdfa sdfa sdfasdf</p> 
     </div> 

    </div> 
</div> 

ここ

出力 右側です（白）

Answer 1

スクロールバーはOSエレメントであり、overflow: scroll;またはoverflow: auto;を使用しているときは、その出力を無効にすることはできません。

つまり、多くのタッチスクリーンデバイスやMacでは、スクロールバーが消えてしまいます（デフォルトのシステム設定で）。

overflow: hidden;の親より少し広いを作成する場合は、非表示にすることができます。恒久的に表示されるスクロールバーの幅は24pxですが、その幅はさまざまです。また、これにより、訪問者は、要素がスクロール可能であることがわかりにくくなります。マルチタッチトラックパッドもスクロールホイールもない場合、スクロールすることは不可能ではありません。

標準とアクセシビリティの観点からは、これは悪い考えです。要素のスクロールバーをカスタムコントロールする必要がある場合は、必要な動作を提供するJavascriptライブラリを参照する必要があります。