时间戳

首页 > 解决方案 > 仅使用滚动条滚动

javascript - 仅使用滚动条滚动

问题描述

我正在使用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 并收到以下错误

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

标签： javascripthtmlcssnode.js

解决方案

谷歌浏览器文档说，

通过这种干预，滚轮/触摸板滚动不会在文档级别的滚轮事件侦听器上被阻止，这些侦听器不需要在滚轮事件上调用 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;

请参考这个工作小提琴。

推荐阅读