滚动条覆盖了一个 div 元素

Question

当一个div出现滚动条时，使用overflow-y: auto;会出现问题。

当右侧的

有滚动条（添加更多行以查看），滚动条会覆盖

。如何使

向左移动，以便不被滚动条覆盖？

html,
body {
  overflow: hidden;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#aa {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
#bb {
  position: fixed;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background-color: blue;
  overflow-x: hidden;
  overflow-y: auto;
}
#help {
  position: fixed;
  top: 0;
  right: 0;
  background-color: green;
}

<div id="aa" contenteditable>a
  <br>few
  <br>lines
</div>
<div id="bb" contenteditable>please add more
  <br>lines here to make
  <br>the scrollbar appear!</div>
<div id="help">?</div>

- Basj

Answer 1

我做了一些更改，使用了flexbox将它们放在一起，将两个部分都设置为相对定位。并将?放在#bb内，并将其设置为绝对定位。

html,
body {
  overflow: hidden;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.flex-container {
  display: flex;
  width: 100vw;
  height: 100vh
}
#aa {
  position: relative;
  flex: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
#bb {
  position: relative;
  flex: 1;
  height: 100%;
  background-color: blue;
  overflow-x: hidden;
  overflow-y: scroll;/* Just so the bar is there */
}
#help {
  position: absolute;
  top: 0;
  right: 0;
  background-color: green;
}

<div class="flex-container">
  <div id="aa" contenteditable>a
    <br>few
    <br>lines
  </div>
  <div id="bb" contenteditable>
    I've made it always
    <br>so the scrollbar is
    <br>there but you can
    <br>change it back to auto
    <div id="help">?</div>
  </div>
</div>

希望这对你有帮助。

编辑：

我认真思考了一下，我认为这可能是更好的方法。

html,
body {
  min-height: 100vh;
}
* {
  margin: 0;
  padding: 0;
}
#aa {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
}
#bb {
  margin-left: 50%;
  min-height: 100vh;
  background-color: blue;
}
#help {
  position: fixed;
  top: 0;
  right: 0;
  background-color: green;
}

<div id="aa" contenteditable>a
  <br>few
  <br>lines
</div>
<div id="bb" contenteditable>please add more
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>the scrollbar appear!
</div>
<div id="help">?</div>

这个网页利用整体页面的滚动来滚动右侧列（左侧固定不动）。这意味着right:0;会跟随滚动条一起移动。

- Andrew Bone

---

@Basj 你的意思是当你向下滚动时它会消失吗？ - Andrew Bone

是的，目前它可以。但是始终存在滚动条的事实并不是我们想要的。如果我改为使用auto而不是scroll，那么问号也会消失。 - Basj

我已经尝试过类似的事情，但问题在于现在“？”是文本的一部分。只需按CTRL+A选择可编辑div的所有内容：然后“？”就会成为其中的一部分......看来要实现我想要的功能非常棘手... - Basj

@Basj 抱歉，我之前粘贴了错误的 HTML 代码，现在已经更正了。 - Andrew Bone

哦，这就是为什么当滚动条到达时蓝色列＃bb向左移动的原因。好的。 - Basj

Answer 2

简单的方法是将bb div的宽度设置为48％

html,
body {
  overflow: hidden;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#aa {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
#bb2 {
  position: fixed;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background-color: blue;
}
#bb {
  position: fixed;
  top: 0;
  left: 50%;
  width: 48%;
  height: 100%;
  background-color: blue;
  overflow-x: hidden;
  overflow-y: auto;
}
#help {
  position: fixed;
  top: 0;
  right: 0;
  background-color: green;
}

<div id="aa" contenteditable>a
  <br>few
  <br>lines
</div>
<div id="bb2"></div>
<div id="bb" contenteditable>please add more
  <br>lines here to make
  <br>the scrollbar appear!</div>
<div id="help">?</div>

- linearSpin

---

谢谢，但这会破坏通常的用户体验，因为滚动条会触及屏幕右边界... - Basj

我在这篇文章中找到了一个JavaScript函数 --> https://dev59.com/Vmox5IYBdhLWcg3wOyD9 看看吧。 - linearSpin

我想到了一个小技巧，可以在“bb”下面再设置一个空的div，但是它的宽度要设为50%，并且背景色要设置成蓝色，这样就可以解决问题了。 - linearSpin

问题在于 @linearSpin 不是一个事件，因此我将无法知道何时发生这种情况... - Basj

这是相同的@linearSpin: 滚动条不靠近屏幕边界，这违反了用户体验标准... - Basj

没有人能帮助你，因为你没有给出一个合适的问题。但是这里有一点需要指出：你在最开始就犯了一个错误，帮助的“div”不应该在“bb”内部。只需将按钮放在外面即可。 - linearSpin