Question

我想在我的网页中始终显示垂直滚动条。可以使用javascript吗？我认为可以使用javascript或jQuery。我想要垂直滚动条是否有足够的内容显示或不显示。

感谢。

Answer 1

不应该要求jQuery。您可以尝试添加CSS：

body    {overflow-y:scroll;}

这适用于最新的浏览器，甚至是IE6。

Answer 2

只需注意：在OS X Lion中，溢出设置为＆＃34;滚动＆＃34;表现更像汽车，因为滚动条只会在使用时显示。它们会在不使用时消失。因此，如果上述任何解决方案似乎都不起作用，那可能就是原因。

这是您需要解决的问题：

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

您可以相应地设置样式。

Answer 3

只需使用CSS。

body {
  overflow-y: scroll;
}

Answer 4

将包含div的{{3}}设置为scroll。

Answer 5

尝试在body标签的onload方法上调用一个函数，并在该函数中更改body的样式，就像这个document.body.style.overflow ='scroll';你也可能需要设置html的宽度，因为这也会显示水平滚动条

你的html文件看起来像这样

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

Answer 6

试图通过以下方式解决该问题：

body {
  overflow-y: scroll;
}

但是在这种情况下，我最终在Firefox中有了两个滚动条。因此，我建议像这样在html元素上使用它：

html {
  overflow-y: scroll;
}

Answer 7

这是一种方法。这不仅会提供滚动条容器，而且即使内容不够（根据您的要求）也会显示滚动条。也适用于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>

Answer 8

将类添加到要滚动的div中。

overflow-x：hidden; 隐藏了horizantal滚动条。虽然溢出-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>

Answer 9

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

Answer 10

我一直是这样做的：

.element {
    overflow-y: visible;
}

我知道非常简单...

如何在浏览器中始终显示垂直滚动条？

10 个答案: