代码片段 → CSS → 强制显示垂直滚动条

强制显示垂直滚动条

Avatar of Chris Coyier
Chris Coyier 于 发布
html {
  overflow-y: scroll;
}

这在 CSS 中是无效的，但在除了 Opera 之外的所有浏览器中都能正常工作。这样做的原因是为了防止在来回浏览包含足够内容以显示垂直滚动条的页面和不包含足够内容的页面时出现“居中跳动”现象。

悄悄话！ 创建一个 DigitalOcean 账户，即可获得 200 美元的免费额度 用于云端托管和服务。

评论

  1. Eddie Monge
    评论永久链接#

    Mozilla 有一个特定的属性：overflow: -moz-scrollbars-vertical;

    我认为 IE 始终显示垂直滚动条。

    回复
    • Ganesh Kumar
      评论永久链接#

      我想在 Jquery 中使用垂直滚动框模型。请帮帮我。

  2. Emmanuel
    评论永久链接#

    嗨，我喜欢这个新的代码片段区域，非常有用！

    回复
  3. 廉价比基尼
    评论永久链接#

    感谢您的访问和友好的评论。祝您度过美好的一天。

    回复
  4. Holger
    评论永久链接#

    它在 Opera 11.01 中完美运行。谢谢你的提示！

    PS：您的表单很棒。

    回复
  5. Diego
    评论永久链接#

    这很棒，但它会创建双滚动条，不是吗？

    回复
    • Joeri
      评论永久链接#

      不。

    • Captian
      评论永久链接#

      Iceweasel 浏览器 17。确实如此。你说得对。

    • Shaz3e
      评论永久链接#

      我认为你应该使用类似这样的代码，它不会对你造成伤害。

      .element > tag{
      overflow-y: scroll;
      height:400px;
      }

      请根据需要更改 .element 和 tag。

  6. Karl
    评论永久链接#

    谢谢，效果很好 :)

    太棒了！

    回复
  7. Chris
    评论永久链接#

    那

    height: 101% 呢？

    这是在一位 CSS 专业人士的博客中发布的一条建议。
    我没有链接，但您可以在 Google 中搜索此代码。

    回复
  8. Steve
    评论永久链接#

    Chris；一个不优雅的解决方案。如果页面高度或内容大小小于或变得小于浏览器大小，则 overflow-y:scroll; 会添加一个禁用的滚动条。height:101%;（以及其他类似的解决方案，如 margin: 0,0,1px;）启用该滚动条并允许用户滚动几个像素。这似乎无关紧要，但我喜欢在不需要用于滚动目的时禁用滚动条。

    回复
  9. jon
    评论永久链接#

    谢谢！

    如果这是无效的，那么有人应该重新思考什么是有效的。

    回复
  10. Phillip
    评论永久链接#

    您如何看待此代码片段？

    html { min-height: 100%; padding-bottom: 1px; }
    回复
  11. tom
    评论永久链接#

    我使用它来强制显示滚动条。

    html {heigth: 100%; margin-bottom: 1px}

    与 Phillip 的解决方案非常相似。

    回复
  12. Designer Maynard
    评论永久链接#

    这非常适合使用 jQuery 并向上和向下滑动的网站。我在 JavaScript 课程的期末考试中使用了它。它会一直保留滚动条，因此当页面从内容丰富的页面切换到内容较少的页面时，整个页面不会向左或向右移动。

    谢谢。

    以下是一个示例，可能比我的解释更有帮助……:P

    http://tymayn.com/school/jsFinal/

    回复
  13. nathan
    评论永久链接#

    我在哪里添加这段代码？因为我讨厌屏幕从没有滚动条到有滚动条时的跳动。

    感谢任何建议……

    回复
    • warjat
      评论永久链接#

      您拥有的任何 CSS 文件。
      如果您没有外部 CSS 文件，则在 <style> 标签中。

  14. unabacus
    评论永久链接#

    根据我的经验，这会在某些浏览器上创建双滚动条。这是因为在某些浏览器中，可滚动元素是 Html 元素，而在其他浏览器中则是 Body 元素。据我所知，唯一不会导致实际可用性问题的解决方案是

    body { height: 100%; margin-bottom: 1px; }

    回复
    • Jon
      评论永久链接#

      是的。在 Chrome 中尝试过，出现了两个滚动条。您的解决方案解决了问题。

  15. nathan
    评论永久链接#

    那么我应该把它放在哪里？

    回复
  16. DMuir
    评论永久链接#

    谢谢，我尝试了许多不同的方法，但收效甚微。您的方法在所有浏览器（包括我的 Opera）中都运行良好“html {overflow-y: scroll; }”

    对于 Nathan，只需将其放在样式表中的任何位置即可，但我通常将我的更改添加到底部并添加一条注释说明我正在做什么。

    /* ———DMuirDesigns——— 添加 html {overflow-y: scroll; } 以始终创建滚动条以停止滚动条偏移 —— */

    最好在 CSS 中搜索一下是否使用了“html”，这样您就可以直接添加它。

    回复
  17. Alan Henrique
    评论永久链接#

    干得好，伙计。

    回复
  18. Dude
    评论永久链接#

    简单而不错！谢谢。

    回复
  19. Tom J Hume
    评论永久链接#

    先生，您真是个天才。

    回复
  20. Mr Love
    评论永久链接#

    非常感谢我遇到的最佳解决方案 - 简短而简单，并且在不需要时会禁用滚动条，太棒了！

    那么为什么它被认为是无效的呢？我使用 http://jigsaw.w3.org/css-validator/ 检查过，没有任何错误。

    回复
  21. 谁？
    评论永久链接#

    ^它不是无效的；这只是一篇旧文章。overflow-y 不在 CSS 2.1 规范中，但已在 CSS3 中添加。

    回复
  22. Debbie
    评论永久链接#

    谢谢！我一直在疯狂地解析和测试 CSS 和 HTML 中的所有内容，以为我的编码出了问题，没有意识到滚动条会导致页面之间出现几个像素的偏移！

    回复
  23. deveedutta
    评论永久链接#

    我从未在 HTML5 样板中看到过它.. 可以将其包含在其中吗？

    回复
  24. remzai
    评论永久链接#

    不要使用

    body,html{ overflow-y:scroll;}

    而是使用

    html{overflow-y:scroll}
    或
    body{overflow-y:scroll}

    两者测试结果相同。

    回复
  25. Agung Wiseso
    评论永久链接#

    我可以与 jquery 一起使用吗？

    回复
  26. rohit
    评论永久链接#

    当选择高度非常低时，如何显示垂直滚动条？

    回复
  27. Bhavesh More
    评论永久链接#

    不错。

    回复
  28. Ankur
    评论永久链接#

    您能否告诉我一种自动将 php 页面滚动到底部的方法？它不断添加新的数据，这些数据位于底部，为了阅读这些数据，我必须向下滚动。有没有办法让页面自动滚动到底部以显示新条目？

    回复
  29. John
    评论永久链接#

    对于如此基本的要求，竟然有如此长的讨论串。

    回复
  30. Satya Narayan Vyas
    评论永久链接#

    简单而不错！谢谢。

    回复
  31. fernando ingunza
    评论永久链接#

    谢谢 remzai

    回复
  32. 标签
    评论永久链接#

    只需两个词 overflow-y 和 scroll ，就能创造奇迹。谢谢

    回复
  33. Joe Miller
    评论永久链接#

    只是一个说明

    如果你在 Chrome 或 Safari Mobile 中使用 backspace-visibility: hidden 进行抗锯齿处理，那么使用 overflow-y: scroll 会创建一个第二个内部滚动条……（这真是太拗口了）

    除此之外效果都很好。

    附言：Codepen.io 上没有显示这个错误：

    回复
  34. David
    评论永久链接#

    这真是让我抓狂！非常感谢你分享解决方案：它完美地解决了问题。

    回复
  35. Randy
    评论永久链接#

    这段代码应该放在哪里？在 body 内？还是在 head 内？

    回复
  36. Nils
    评论永久链接#

    现在我们只需要一个针对 iOS Safari 的解决方案……这可以让你接近目标，但并非真正解决问题

    http://fiddle.jshell.net/desandro/X6zfS/

    不过它确实适用于除了 body/html 标签之外的所有标签。

    回复
  37. Renato Frota
    评论永久链接#

    你可以将 body 的 overflow-y 重置为“hidden”或“initial”以避免双滚动条

    html {
    overflow-y: scroll;
    overflow-x: hidden; /* I do NOT want hz scroll */
}
body {
    overflow-y: initial; /* avoid the double scroll */
}

    我感到惊讶的是还没有人提出这个建议。

    希望它能帮到你 :)

    回复
  38. Ashley
    评论永久链接#

    OSX 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);
}
    回复
    • Roshin
      评论永久链接#

      这段代码在 Firefox 上不起作用。Firefox 的滚动样式属性是什么？如何调整垂直滚动条的高度？

      /* Chrome and Safari */
::-webkit-scrollbar {
    width: 8px;
}
/* Track */

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #292121;
    background: #292121;
}
/* Handle */

::-webkit-scrollbar-thumb {
    background: #FE505A;
    -webkit-box-shadow: inset 0 0 6px rgba(255, 149, 155, 0.66);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 0, 0, 0.4);
}

/*IE 8 plus*/
body{
scrollbar-base-color: #FE505A;
scrollbar-base-color: #FE505A;
scrollbar-3dlight-color: #FE505A;
scrollbar-highlight-color: #292121;
scrollbar-track-color: #292121;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #FE505A;
scrollbar-dark-shadow-color: #FE505A;
}
  39. Lucky G.
    评论永久链接#

    所有这些解决方案只有在盒子高度达到特定最小尺寸（例如 size="6" 或 height:86px）时才有效。有人知道如何在 IE11 中始终显示滚动条吗？在 IE8 中效果很好。而且滚动条本身的高度非常大，即使在 size="6" 时滚动基本上也无效。如何将其变细？

    回复
  40. izhar
    评论永久链接#

    我想让屏幕自动滚动。这可能吗？

    回复
  41. Sebastian Schmal
    评论永久链接#

    我需要在 IE 11 中始终显示滚动条！
    overflow-y: scroll;

    但是这个 CSS 代码不起作用 :/

    回复
  42. vijay
    评论永久链接#

    伙计们，我在 Mac 浏览器中遇到一个问题，当我将鼠标插入 MacBook 时滚动条消失了，在垂直滚动 div 的右上角第一次出现一个白色方块。刷新页面后我才能看到滚动条。我在许多网站上都看到了这个问题。

    这是一个演示链接 http://s.codepen.io/vulchivijay/debug/XdpgpY

    你们看看这个。告诉我如何解决它。

    回复
  43. Vijay
    评论永久链接#

    我想在左右两侧都显示垂直滚动条，这可能吗？

    回复
  44. Simha
    评论永久链接#

    我需要一些技巧，当窗口最小化时启用滚动条，否则禁用滚动条
    滚动条

    回复
  45. vimal
    评论永久链接#

    你好。我将下面的代码输入到主题的自定义 CSS 中，但由于某种原因，垂直滚动条在我加载网站后仍然会消失。欢迎大家提供任何解决此问题的修复方案。谢谢。Vimal

    html {
    overflow-y: scroll;
    }

    回复

发表评论

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.