Bootstrap 滚动条滑到内容后面答案

【问题标题】：Bootstrap scrollbar slipped behind contentBootstrap 滚动条滑到内容后面
【发布时间】：2020-04-14 21:17:32
【问题描述】：

我正在使用 Bootstrap 4 在网页上工作，通过在 html 标签中添加 overflow-x:hidden 来修复移动设备上水平滚动条的外观后，我注意到主 y 滚动条看起来很奇怪，并且大部分都不可点击时间不再（通常可以用鼠标左键拉动，但它现在不会对点击做出反应。但是，它会记录对滚动条后面内容的点击！）。

这种情况肯定不会很久了，但我一点也不知道是什么导致了这种变化，因为我没有触摸任何 z-index 或滚动条设置...

我正在使用 Chrome，它应该显示标准的、无样式的滚动条，它看起来不像这样。谁能告诉我发生了什么以及如何解决它？！

编辑：由于它在所有页面中同样发生，因此错误应该在主模板中的某个地方，并且由于大部分被覆盖，它很可能在标题中。也许有人可以发现错误：

<!doctype html>
<html lang="en" style="overflow-x: hidden;">
  <head>
    {% load static %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <link rel="icon" href="{% static 'bilder/icons/019-rocket.svg' %}">

    <title>Online-Nachhilfe</title>
  <style>
    body {
      margin:0;padding:0;
      background-image: url({% static 'bilder/Rastergrafik.png' %});
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      overflow-x: hidden !important;
      position:relative;
      z-index:0;
      min-height: 101vh;
      text-align: center;
    }
    </style>
    {% block head %}
    {% endblock %}
  </head>

【问题讨论】：

你的代码在哪里？
我不能准确地发布整个项目的数百行代码，可以吗？不幸的是，我不知道是什么导致了这个，我今天一直在整个网站上工作......但我知道我没有调整任何关于滚动条或 z-index 的东西。也许这是一个普遍的问题？不过我找不到类似的东西……我希望有人能立即从图片中的滚动条设计中看出发生了什么。
我不会通过显示一张图片给你任何信息，你可以将你的 UI 代码上传到 codepen、stackblitz、jsfiddle 等。
我刚刚编辑了我的帖子以包含最有可能包含错误的模板标题，但感谢您的建议。它应该在某个地方，否则它不会转移到所有其他页面，我怀疑这是标准引导代码的错误
这在 SO 中无效，但我敢打赌，从您的 CSS 来看，水平滚动条来自 min-height 属性

标签： html css django bootstrap-4

【解决方案1】：

事实证明这毕竟不是代码问题，浏览器似乎只是无缘无故地决定向我显示移动滚动条版本而不是普通滚动条版本。可以通过从干净的选项卡进入站点或删除浏览器缓存并重新启动 chrome 来修复它。代码似乎 100% 完美运行！

【讨论】：