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

когда у меня есть веб-страница с прокручиваемым контентом. С помощью свойства 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%;
}

Ответы

Ответ 1

Попробуйте добавить ниже к вашему 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; 
}

Ответ 2

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

Ответ 3

Для проблем с Safari, браузерами IOS,

Настройка

-webkit-overflow-scrolling: auto

наряду с вышеупомянутым CSS в других решениях :: - webkit-scrollbar, работает хорошо

Ответ 4

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

Пример JSFiddle

javascript-код.

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

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

Свойство плагина alwaysVisible

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