[英]Scroll using Scroll-Bar Only
我正在使用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
使用此干预式转盘/触摸板,不会在不需要转盘事件上调用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;
请参考这个工作的小提琴 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.