Как всегда показывать вертикальную полосу прокрутки в браузере? - PullRequest
Новая
       11

Как всегда показывать вертикальную полосу прокрутки в браузере?

58 голосов
/ 29 октября 2010

Я хочу всегда показывать вертикальную полосу прокрутки на моей веб-странице.Возможно ли использовать JavaScript?Я думаю, что это возможно с помощью JavaScript или JQuery.Я хочу вертикальную полосу прокрутки, достаточно ли контента, чтобы показать или нет.

спасибо.

Ответы [ 8 ]

130 голосов
/ 29 октября 2010

jQuery не требуется. Вы можете попробовать добавить CSS: 

body    {overflow-y:scroll;}

Это работает в последних браузерах, даже в IE6.

29 голосов
/ 07 июля 2015

Просто примечание: В OS X Lion переполнение, установленное на «scroll», ведет себя больше как auto, поскольку полосы прокрутки будут отображаться только при использовании. Они исчезнут, когда не будут использоваться. Так что, если какие-либо из приведенных выше решений не работают, возможно, поэтому.

Это то, что вам нужно исправить: 

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Вы можете стилизовать его соответственно.

15 голосов
/ 29 октября 2010

Просто используйте CSS. 

body {
  overflow-y: scroll;
}
3 голосов
/ 29 октября 2010

установите overflow свойство содержащего div в scroll.

2 голосов
/ 29 октября 2010

попробуйте вызвать функцию для метода onload вашего тега body, и в этой функции измените стиль body следующим образом: document.body.style.overflow = 'scroll'; также вам может понадобиться установить ширину вашего HTML, так как это также покажет горизонтальные полосы прокрутки

Ваш HTML-файл будет выглядеть примерно так 

<script language="javascript">
    function showscroll() {
        document.body.style.overflow = 'scroll';
    }
</script>
</head>
<body onload="showscroll()">
0 голосов
/ 11 сентября 2018 

// Nothing to show here
body {
  height: 150vh;
}

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .6);
}

/* Of course you can style it even more */
<h1 style="margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: Helvetica, Arial, sans-serif;">Scroll</h1>
0 голосов
/ 09 июня 2017

Добавьте класс в div, который вы хотите прокручивать.

overflow-x: hidden; скрывает горизонтальную полосу прокрутки.В то время как overflow-y: scroll; позволяет вам выполнять вертикальную прокрутку. 

<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
    width: 500px;
    height: 300px;
    overflow-x: hidden; 
    overflow-y: scroll;
}


</style>
</head>
<body>

<div class="scroll"><h1> DATA </h1></div>
0 голосов
/ 31 июля 2012

Вот метод. Это не только предоставит контейнер полосы прокрутки, но также покажет полосу прокрутки, даже если содержимого недостаточно (согласно вашему требованию). Также будет работать на Iphone и Android-устройствах .. 

<style>
    .scrollholder {
        position: relative;
        width: 310px; height: 350px;
        overflow: auto;
        z-index: 1;
    }
</style>

<script>
    function isTouchDevice() {
        try {
            document.createEvent("TouchEvent");
            return true;
        } catch (e) {
            return false;
        }
    }

    function touchScroll(id) {
        if (isTouchDevice()) { //if touch events exist...
            var el = document.getElementById(id);
            var scrollStartPos = 0;

            document.getElementById(id).addEventListener("touchstart", function (event) {
                scrollStartPos = this.scrollTop + event.touches[0].pageY;
                event.preventDefault();
            }, false);

            document.getElementById(id).addEventListener("touchmove", function (event) {
                this.scrollTop = scrollStartPos - event.touches[0].pageY;
                event.preventDefault();
            }, false);
        }
    }
</script>

<body onload="touchScroll('scrollMe')">

    <!-- title -->
    <!-- <div class="title" onselectstart="return false">Alarms</div> -->
    <div class="scrollholder" id="scrollMe">

</div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...