Сделать полосу прокрутки в мобильных браузерах

когда у меня есть веб-страница с прокруткой содержимого. С свойством css " overflow: auto "или" overflow:visible " полоса прокрутки отображается в настольных браузерах, но когда я открываю страницу в мобильных браузерах, полоса прокрутки появляется только при попытке прокрутки. Есть ли способ сделать полосу прокрутки всегда видимой на мобильных устройствах? Я пробовал некоторые библиотеки JQuery, но ни одна из них не работала.

html-код тривиален, у меня есть прокручиваемый div с IFrame внутри:

<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%;
}
30
css javascript jquery mobile-browser scroll

3 ответов

попробуйте добавить ниже к CSS, обратите внимание, что это в WebKit конкретные:

Демо-Скрипка

::-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; 
}
58
  /* !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-он изменит стиль полосы прокрутки только на мобильных устройствах

5

вы можете использовать пользовательскую полосу прокрутки, добавив nanoscroller плагин.

JSFiddle пример

код javascript.

$(".nano").nanoScroller({
    alwaysVisible: true,
});

установить css стиль для элемента контейнера в overflow: hidden;

плагин собственность alwaysVisible

установите значение true, чтобы остановить автоматическое скрытие полосы прокрутки.

0