防止图片过度滚动

Question

我有一个问题，我什至不知道如何google。我设置了两行布局。左边是一个带有背景图片的容器，是固定的：

.image {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: url('/splash_1.png');
  background-size: contain;
  background-attachment: fixed;
 }

到目前为止效果很好。但是当我像“向上滑动”或“向下滑动”一样滚动页面时（在我的情况下，在我的 macbook 上使用触控板）（就像在手机中重新加载页面一样），图像也会滚动并留下白色 space.

为了更好的说明，我把画面录制成如下动图：

有没有办法防止这种情况发生？

Answer 1

试试这个 CSS 属性 overscroll-behavior: contain;。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

防止图片过度滚动

Prevent image from being overscrolled

css

layout

scroll