Хочу убрать стандартный скролл браузера, поставить неширокий красивый как на смартфонах.
1 ответ
Можно сделать и с помощью css. Пример.
P.S. Если я правильно понял задание, то уже настроите под себя:)
body {
min-height: 250vh;
}
::-webkit-scrollbar-button {
width: 5px;
height: 0px
}
/* Цвет дорожки, по которой двигается бегунок прокрутки. */
::-webkit-scrollbar-track {
background-color: #ecedee
}
/* Цвет бегунка полосы, а так же его закругление. */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color: #6dc0c8;
}
/* Цвет бегунка при наведении на него курсора. */
::-webkit-scrollbar-thumb:hover {
background-color: #56999f;
}
/* Основная ширина полосы прокрутки. */
::-webkit-resizer {
width: 4px;
height: 0px
}
::-webkit-scrollbar {
width: 4px;
}
ИЛИ:
body {
min-height: 250vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.js"></script>
<script>
$(document).ready(
function() {
$("html").niceScroll({
cursorcolor:"#6dc0c8",
background:"#ecedee",
autohidemode:"false",
cursorborder:"none",
cursorborderradius:"none"
});
});
</script>
It supports
DIVs
,IFrames
,textarea
, and document page (body
) scrollbars. Compatible with all desktop browser: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers)
-
Мужик спасибо, я обрадовался сначала что на css решение, но на мозиле обычный скролл!) 20 ноя 2017 в 8:49
-
опять же , насчёт обновленного твоего ответа, решение не кроссбраузерно, на мозилле опять не работает) 20 ноя 2017 в 9:07
-
57.0 )))вот недавно обновленная которая с обновленным дизайном 20 ноя 2017 в 9:10
-
1
-
Для неопытных, как я: во-первых, это первое решение, которое работает. Во-вторых, параметр 250vh я поменял на 80vh, потому что изначально внизу появился большой белый "подвал". С заменой на 80 (и менее) всё стало на свои места. 2 дек 2018 в 18:04