浏览器滚动条在我的固定div下

Question

我有一个100％宽度的固定标题。

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

浏览器滚动条在我的固定div下。如何解决？

Answer 1

因为base.css第9行中的overflow-x: hidden;

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}

Answer 2

这可以通过添加body的溢出来解决

这

overflow:auto;

到

overflow:auto;
overflow:initial;

This is your issue

如果滚动设置在正文上，如果其结构为正文＆gt;包装器＆gt;标题（具有固定位置），内容等等

以下是您的解决方案

solution for issue

注意：这只适用于body，但不适用于带滚动的div容器。您也可以使用z-index使其工作，但您将指定z-index来堆叠其他元素以使其正确。

希望这会有所帮助.. :)

Answer 3

问题不在body标签上overflow-x上。这是因为 overflow-x 标签上的overflow-y和html。将其从HTML标记中删除后，我可以将自己想要的任何溢出物放在身上。

在以下情况下会发生这种情况：

• overflow-x设置为auto，hidden，overflow或scroll
• overflow-y设置为auto，hidden，-webkit-paged-x或-webkit-paged-y

不一定要显式调用overflow-x或overflow-y，因为overflow会同时设置它们。

我在使用Windows 10的Chrome 67上。

Answer 4

一个css hack（我终于找到了一种方法）为此做了很快的解释 - 第一个浮动元素是。 我想从下面的代码中了解它的工作原理。

更新：移动浏览器存在一个问题，请参阅下文，以评估您是否对它感到满意。

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

最终代码，与您想要的内容几乎相同，看得见并且正常工作

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

它适用于移动和桌面浏览器。实际上，当我的计算机改为平板电脑模式然后桌面模式时，我在Windows边缘测试了移动设备。代码一直在工作。 要检查它是否适用于：before而不是div id =“aaaa”，以使其更加css纯和其他div相互依赖。

更新：使用Edge浏览器在进入平板电脑模式时不会更改滚动条，因此无法正常使用。

如果在bbbb元素中遇到隐藏内容的问题，请尝试不要在bbbb容器中定位：绝对/固定元素。

我尚未针对所有情况和浏览器对其进行测试。

更新：提到的问题在这个答案的顶部 - 但是在移动浏览器上滚动条被覆盖，因为滚动条是动态的 - 它只在您滚动时出现并且您知道它不属于任何容器。所有浏览器上的滚动条可能都很薄，因此您应该决定如何处理它。可能还有5个像素左右？

Answer 5

我有这个问题，我的滚动条在我的固定标题下，我从我的html标签height: 100%;中删除后解决了这个问题，我添加了其他礼节以确保我有相同的结果。其他解决方案都没有帮助我。我希望这有助于某人。

Answer 6

在作为标头和内容父级的容器上设置z-index。

Answer 7

我解决这个问题的方法是设置滚动条的宽度，然后将导航条的宽度设置为 100% 减去滚动条的宽度。

像这样：

.main-container::-webkit-scrollbar {
  width: 8px;
}

.navbar{
    display: flex;
    position: fixed;
    width: calc(100% - 8px);
    height: 8rem;
    z-index: 5000;
}

这是它的样子

Answer 8

React应用程序中存在相同的问题。

将overflow-y: scroll样式从#root移动到body选择器。它为我解决了问题。

Answer 9

可以通过以下两种方法解决此问题：

1。首先计算scrollbarWidth=el.offsetWidth - el.clientWidth

2。设置固定的div left=scrollbarWidth

Answer 10

删除html标签中的height:100%

Answer 11

在topNavBar上放置margin-right: 0px;对我有用

Answer 12

clip-path 属性可以帮助您。

尽管您需要将标题放在可滚动内容中，但这并不重要，因为它具有固定位置。然后，如果您将 clip-path: inset(0 0 0 0); 应用到容器，它将剪掉此矩形之外的所有内容。

function toggle() {
  content.classList.toggle('clip');
}

#container {
  overflow-y: auto;
  width: 300px;
  height: 100px;
  padding: 0;
}
#fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 350px;
  height: 50px;
  background: blue;
}
#content {
  height: 1000px;
  width: 100%;
  background: yellow;
}
#content.clip {
  clip-path: inset(0 0 0 0);
}

<div id="container">
  <div id="content">
    <div id="fixed"></div>
  </div>
 </div>
 <button onclick="toggle()">toggle clip-path</button>