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

Я хочу всегда показывать вертикальную полосу прокрутки на моей веб-странице. Можно ли использовать javascript? Я думаю, что можно использовать javascript или jQuery. Я хочу вертикальную полосу прокрутки, есть ли контент для показа или нет.

спасибо.

Ответ 1

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

body    {overflow-y:scroll;}

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

Ответ 2

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

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

::-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);
}

Вы можете настроить его соответствующим образом.

Ответ 3

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

body {
  overflow-y: scroll;
}

Ответ 4

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

Ответ 5

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

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

<script language="javascript">
    function showscroll() {
        document.body.style.overflow = 'scroll';
    }
</script>
</head>
<body onload="showscroll()">

Ответ 6

Вот метод. Это не только обеспечит контейнер прокрутки, но также покажет полосу прокрутки, даже если контент недостаточно (согласно вашему требованию). Также будет работать и на 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>

Ответ 7

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

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

<!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>