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并收到以下错误

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

Answer 1

Google Chrome docs这样说，

通过这种干预式转盘/触摸板，不会在不需要转盘事件上调用preventDefault（）的文档级转盘事件侦听器上阻止滚动。

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

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

</div>

function stop(){
    return false;
}

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

请参阅此工作fiddle。

仅使用滚动条滚动

1 个答案: