防止图像被过度滚动

Posted 2023-03-17

【中文标题】防止图像被过度滚动

【英文标题】：Prevent image from being overscrolled

【发布时间】：2022-01-16 18:15:24

【问题描述】：

我有一个问题，我什至不知道如何用谷歌搜索。我设置了两行布局。左侧是一个带有背景图片的容器，它是固定的：

.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 上）时（就像在手机中重新加载页面所做的那样），图像也会滚动并留下空白。

为了更好地解释它，我将屏幕记录在以下动画 Gif 中：

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

【问题讨论】：

用html粘贴你的完整代码

【参考方案1】：

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

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