Постоянно показывать скрол на мобильных устройствах, как реализовать?

Question

[Антон Вебсайтовский]

Здравствуйте.
Во всплывающем окне сделал скрол, на мобильных устройствах его не видно если не начать скролить, как скрол постоянно показывать?

.sclll{
    overflow-y: scroll;
    height: 240px;
    padding-right: 20px;
  }

Comments

[Rustam Bainazarov]

Никак. Либо использовать плагин, который делает свой скроллбар.

Лучше вот этот:
https://github.com/KingSora/OverlayScrollbars

Он не ломает нативных методов прокрутки.

[Alex]

Оставьте поведение скролбаров на совести браузера. Если в вашем интерфейсе существует острая необходимость продемонстрировать что контент может быть проскролен — используйте другие паттерны.

[Антон Вебсайтовский]

Рустам Байназаров, дохера конечно весит он ,js только по 300кб

[Rustam Bainazarov]

Антон Вебсайтовский, 52 кб (JS) и 19 кб (CSS). И это без учёта сжатия GZIP. Откуда 300 кб?

[Антон Вебсайтовский]

Рустам Байназаров, ну это сжатые да, но там лишнего горы, если вырезать то это надо шарить.

[Rustam Bainazarov]

Антон Вебсайтовский, я не понял, о чём вы. Это я привёл данные двух файлов, которые нужно подключить и которые доступны по ссылке. Что нужно вырезать? После GZIP (это автоматическое серверное сжатие) получается где-то 25 Кб всего.

[Антон Вебсайтовский]

Рустам Байназаров, это я понял, я об другом, что там разные дизайны есть, их тоже отдельным css подключать надо, а так же js пихать там где будет скрол этот, вот только я чет не нашел какой js, где будет прописан шаблон какой подгружать и с какой стороны скрол будет.

Answer 1

[Qias]

Показ скролла зависит от браузера. У каждого он свой.
Можешь воспользоваться вот этим : htmlbook.ru/blog/polzovatelskie-skrollbary-v-webkit ;

Comments

[Антон Вебсайтовский]

добавил в css

::-webkit-scrollbar-track-piece:start {
  /* Выделение верхней половины (или левой половины) трека */
}

::-webkit-scrollbar-thumb:window-inactive {
  /* Выделение ползунка, когда окно браузера не активно */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
  /* Выделение нижней или левой кнопки, когда на них наведён курсор мыши */
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

потом глянул на мобиле и ничего не изменилось.

[Qias]

Антон Вебсайтовский, jsfiddle.net/swfour/2nT38

[Qias]

Антон Вебсайтовский, https://habr.com/ru/company/2gis/blog/169359/ вот ещё можешь почитать.

[Антон Вебсайтовский]

Qias, так мне для блока надо ) а не общий скрол показывать на мобиле.