仅使用滚动条滚动

Question

我正在使用 three.js 来允许用户创建和编辑一个 3D 模型，该模型涉及使用滚轮/两指功能来放大和缩小。我想要页面的第二部分默认情况下不在屏幕上，但用户可以向下滚动查看它。最好只使用滚动条来完成，而滚轮仍然可以使用。

出于性能原因，我宁愿不必使用诸如 vue.js 之类的东西。用户提供保留在他们计算机上的数据，我在这两个部分都使用了这些数据。这可以防止我只是将数据放在另一个屏幕上。

Overflow:hidden 是不可能的，因为那时我无法滚动到底部。

我尝试将PreventDefault 与几个不同的EventListeners 一起使用，但它们都不能正常工作。

下面是确定窗口大小的函数，应该包含一个函数或代码来防止滚动。没有特定的元素不应该滚动，它们都不应该滚动。

function onWindowResize() {
  var viewWidth;
  var viewHeight;
  viewHeight=window.innerHeight-315;
  //For Mobile
  if(!UIactive && innerWidth < 640){
    viewWidth= window.innerWidth;
  //For Computer & Tablet
  } else {
    viewWidth= window.innerWidth -317;
    if(window.innerHeight < 700){
      viewHeight=window.innerHeight-52.67;
      //Disable Scrollwheel

      window.addEventListener('wheel',function(event){
        //mouseController.wheel(event);
        event.preventDefault();
      }, false);

    }
  }
    camera.aspect = (viewWidth) / (viewHeight);
    camera.updateProjectionMatrix();
    renderer.setSize(viewWidth, viewHeight);
    UI.style.height= (viewHeight+'px');

}

编辑：我尝试使用类似问题的答案。这没有达到预期的结果。我将代码更改为窗口...和文档...并且包含的​​ console.log 语句有效，但我仍然可以滚动。

this.canvas.addEventListener('wheel',function(event){
    mouseController.wheel(event);
    return false; 
}, false);

然后我再次尝试使用 preventDefault 并收到以下错误

由于目标被视为被动，因此无法在被动事件侦听器中阻止默认

Answer 1

Google Chrome docs 这么说，

通过这种干预，滚轮/触摸板滚动不会在文档级滚轮事件侦听器上被阻止，这些侦听器不需要在滚轮事件上调用 preventDefault()。

因此，您应该将 onmousewheel 事件应用于特定的 div，如下所示：

<div id="ScrollableDiv" style="height : 900px;background-color : red">

</div>

function stop(){
    return false;
}

var div = document.getElementById('ScrollableDiv');
div.onmousewheel= stop;

请参考这个工作fiddle。