JavaScript完全禁止在元素上滚动

这个问题不是关于使用 overflow: hidden 阻止用户滚动。它是关于确保一个元素不能被另一个脚本滚动。

我准备了下面的示例来说明一个可能发生不需要的滚动的情况(我知道 position: relative tr 或 td 将解决滚动问题。我在问是否有办法禁用滚动(使用javascript或html)。

var dom = document.querySelector("tbody");


for (var index = 0; index < 50; index++) {
  var row = document.createElement("tr");
  var cell = document.createElement("td");
  cell.appendChild(document.createElement("input")).id = "x" + index;
  cell.appendChild(document.createElement("label")).htmlFor = "x" + index;
  row.appendChild(cell);
  dom.appendChild(row);
}

#div1 {
  height: 200px;
}

#div2 {
  height: 100%;
  overflow: scroll;
}

input {
  pointer-events: none;
  position: absolute;
  opacity: 0;
}

label::before {
  content: "label";
}

<div id="div1" style="height: 200px;">
  <div id="div2" style="height: 100%; overflow: scroll;">
    <table>
      <tbody>

      </tbody>
    </table>
  </div>
</div>

据我所知,我已经尝试覆盖所有可能改变垂直滚动的属性。

function define(prototype, propertyName, declaration) {
    Object.defineProperty(prototype, propertyName, {
        configurable: false,
        value: declaration,
        writable: false
    });
}

define(dom, "scrollIntoView", function () { });
define(dom, "scrollBy", function () { });
define(dom, "scrollTo", function () { });
define(dom, "scroll", function () { });
define(dom, "scrollTop", 0);

scroll 要将元素滚动回的事件侦听器 0

dom.addEventListener("scroll", function(){if(dom.scrollTop) dom.scrollTop = 0; });

但在某些浏览器(如Edge)上,这种功能是跳跃式的/浮华的。