能否通过CSS控制DIV父元素的overflow属性？

要实现“特定屏幕外div不触发页面滚动，且不直接修改body的overflow属性”，可以用以下几种实用方法：

方法一：改用fixed定位 #

将不需要触发滚动的屏幕外div从position: absolute改为position: fixed。fixed定位的元素脱离文档流，其位置相对于视口而非文档，超出视口的部分不会被计入body的滚动范围，自然不会出现滚动条。

修改后的CSS：

.b {
  position: fixed; /* 替换absolute */
  left: 2500px;
  width: 200px;
  height: 100px;
  background-color: red;
}

如果需要动态控制（部分div触发滚动，部分不触发），可以通过JS给目标元素添加类来切换定位：

// 动态添加div时判断是否需要阻止滚动
function addDiv(preventScroll) {
  const div = document.createElement('div');
  div.textContent = 'asf kkk';
  div.classList.add('b');
  if (preventScroll && window.innerWidth < 2500) {
    div.classList.add('fixed');
  }
  document.body.appendChild(div);
}

.b {
  position: absolute;
  left: 2500px;
  width: 200px;
  height: 100px;
  background-color: red;
}
.b.fixed {
  position: fixed;
}

方法二：用视口容器包裹元素 #

给目标元素套一个尺寸等于视口的fixed容器，容器设置overflow: hidden，这样内部元素超出容器的部分会被隐藏，不会影响body的滚动：

HTML结构（动态创建）：

<div class="viewport-container">
  <div class="b">asf kkk</div>
</div>

CSS：

.viewport-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none; /* 不需要元素响应事件时可加 */
}
.b {
  position: absolute;
  left: 2500px;
  width: 200px;
  height: 100px;
  background-color: red;
  pointer-events: auto; /* 如需响应事件，覆盖容器的none */
}

原理说明 #

CSS中确实没有overflow-parent这类反向控制父元素的属性，但我们可以利用定位规则和容器裁剪来绕开直接修改body的overflow：

• absolute定位元素会被计入父元素的滚动范围（如果父元素是body/html），而fixed定位不会。
• 用视口尺寸的容器包裹并裁剪，相当于将元素的“影响范围”限制在视口内，不会触发body的滚动计算。

内容的提问来源于stack exchange，提问作者MyDaftQuestions