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

【问题标题】：How to always show the vertical scrollbar in a browser?如何始终在浏览器中显示垂直滚动条？
【发布时间】：2011-05-02 07:03:15
【问题描述】：

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

谢谢。

【问题讨论】：

你必须要求这些东西来学习。
Making the main scrollbar always visible的可能重复

标签： html css browser

【解决方案1】：

我一直是这样做的：

.element {
    overflow-y: visible;
}

我知道非常简单......

【讨论】：

【解决方案2】：

尝试通过以下方式解决：

body {
  overflow-y: scroll;
}

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

html {
  overflow-y: scroll;
}

【讨论】：

【解决方案3】：

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

&lt;h1 style="margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: Helvetica, Arial, sans-serif;"&gt;Scroll&lt;/h1&gt;

【讨论】：

您能否阐明这段代码究竟是如何解决问题中的问题的？
您好，它也适用于 Macbook、台式电脑，但不适用于 IPAD。您有适用于 IPAD、Iphone 的解决方案吗？

【解决方案4】：

将类添加到要滚动的 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>

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。
请使用edit链接来解释这段代码是如何工作的，不要只给出代码，因为解释更有可能帮助未来的读者。另见How to Answer。 source

【解决方案5】：

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

您可以设置相应的样式。

【讨论】：

确实是mac os specific

【解决方案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】：

jQuery 不应该是必需的。您可以尝试添加 CSS：

body    {overflow-y:scroll;}

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

【讨论】：

我相信overflow-x和overflow-x过去给我带来了一些痛苦。
我认为只有在溢出时才会显示滚动条。要显示滚动条，请始终尝试 body { overflow-y: scroll;身高：101%； }
这轮你搞错了。如果您设置了溢出：自动，则在必要时会显示滚动条。 overflow:scroll 总是显示滚动条。如果内容不够长，则滚动条显示为灰色。
如果我只想在 HTML select 中显示两个元素并且仍然想要垂直滚动条然后 overflow-y:scroll;不起作用。
这对我有用，但我还必须添加 !important 以便我使用的引导模式不会隐藏滚动条。

【解决方案8】：

将包含div 的overflow property 设置为scroll。

【讨论】：

【解决方案9】：

只需使用 CSS。

body {
  overflow-y: scroll;
}

【讨论】：

请注意，OP 只显示 vertical 滚动条。在这种情况下，overflow 属性意味着水平滚动条也会显示。你应该改用overflow-y。

【解决方案10】：

尝试在你的 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()">

【讨论】：

好吧，OP 要求提供 Javascript 解决方案，但这并不意味着他需要。这是改变风格的一个非常糟糕的解决方案。这就是 CSS 的用途：层叠样式表。在 CSS 中，它只是一行，就像接受的答案所示。