web-dev-qa-db-ja.com

モバイルブラウザでスクロールバーを表示する

スクロール可能なコンテンツを含むWebページがある場合。 cssプロパティ "overflow：auto"または "overflow：visible"を使用すると、デスクトップブラウザーでスクロールバーが表示されますが、モバイルブラウザーでページを開くと、スクロールしようとしたときにのみスクロールバーが表示されます。モバイルデバイスでスクロールバーを常に表示する方法はありますか？いくつかのJQueryライブラリを試しましたが、どれも機能していません。

Htmlコードは簡単です、私は内部にIFrameを持つスクロール可能なdivを持っています：

<div id="wrapper">
    <iframe id="frameContent" src="mysite" scrollable="yes"></iframe>
</div>

CSS：

#wrapper{
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

#frameContent{
    width: 100%;
    height: 100%;
}
javascriptjquerycssscrollmobile-browser
43
user3098549

以下をCSSに追加してみてください。これは webkitspecific であることに注意してください。

デモフィドル

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}
70
SW4
  /* !important is needed sometimes */
 ::-webkit-scrollbar {
    width: 12px !important;
 }

 /* Track */
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
   background: #41617D !important; 
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 

 }
 ::-webkit-scrollbar-thumb:window-inactive {
   background: #41617D !important; 
 }

このcssコードを追加-モバイルデバイスのみでスクロールバーのスタイルを変更します

9
pradeep raj t

Safariの問題については、IOSブラウザ、

セッティング

-webkit-overflow-scrolling：自動

上記の他の::-webkit-scrollbarソリューションで言及したCSSとともに、うまく機能します

1
Sasi Kumar M