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


Answers:


145

不需要jQuery。您可以尝试添加CSS:

body    {overflow-y:scroll;}

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


1
我相信overflow-xoverflow-x过去曾给我带来一些麻烦。
朱利奥·桑托斯

4
我认为这只会在有溢出时显示滚动条。要显示滚动条,请始终尝试body {overflow-y:scroll; 高度:101%; }
Nils Weinander

4
您以错误的方式进行了此回合。如果设置了overflow:auto,则在必要时显示滚动条。overflow:scroll始终显示滚动条。如果内容不够长,则滚动条将显示为灰色。
Coin_op 2010年

如果我只想在HTML中显示两个元素,并且仍然希望垂直滚动条,那么请执行overflow-y:scroll;。不起作用。
Mukesh

这对我!important有用,但是我还必须添加,以使我使用的Bootstrap模态不会隐藏滚动条。
威廉

43

请注意:在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);
}

您可以相应地设置样式。




2

尝试在body标签的onload方法上调用一个函数,然后在该函数中更改此文档的主体样式。body.style.overflow='scroll'; 您也可能需要设置html的宽度,因为这也会显示水平滚动条

您的html文件将如下所示

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

2
好吧,OP要求使用Javascript解决方案,但这并不意味着那是他所需要的。这是更改样式的非常糟糕的解决方案。这就是CSS的目的:级联样式表。在CSS中,它只是一行,就像已接受的答案所示。
stevenvh 2014年

2

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


您能否阐明此代码如何精确解决问题中的问题?
jwg

您好,它也适用于Macbook,台式机,但不适用于IPAD。您有IPAD,iPhone的解决方案吗?
罗伦佐

2

尝试通过以下方式解决问题:

body {
  overflow-y: scroll;
}

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

html {
  overflow-y: scroll;
}

1

这是一种方法。即使内容不足(根据您的要求),这不仅会提供滚动条容器,还会显示滚动条。也可以在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>

0

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

溢出-x:隐藏; 隐藏水平滚动条。而溢出-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>

尽管此代码可以回答问题,但提供有关如何和/或为什么解决问题的其他上下文将提高​​答案的长期价值。
Badacadabra

请使用编辑链接来解释此代码的工作原理,而不仅仅是给出代码,因为这样的解释更有可能对未来的读者有所帮助。另请参阅“如何回答”消息来源
杰德·福克斯

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.