我正在使用html / javascript / css进行缩放功能
我将wheel
事件监听器附加到div
标记
和console.log(event.wheelDelta)
它适用于鼠标。 console.log
给出放大120的正倍数,否则为负
问题在于触摸板
放大手势时,它不会提供一致的值。中间有一些-120
。因此,变焦非常粗糙
如何实现平滑缩放或如何使用触控板获得一致的wheelDelta
值
答案 0 :(得分:2)
event.wheelDelta
未在每个浏览器中定义,已弃用且不应再根据its Mozilla documention使用。您可以使用值event.deltaX
和event.deltaY
。有关详细信息,请参阅Mozilla wheel documentation。
我在Google Chrome和Mozilla Firefox中测试了以下代码。价值观非常不同。 Google Chrome浏览器始终返回event.deltaY
值100
或-100
。在Mozilla Firefox中,它始终返回值3
或-3
。
document.addEventListener('wheel', function(event) {
console.log(event.deltaX, event.deltaY);
});
我不会依赖于轮值,而是听取Mozilla scroll documentation上描述的滚动事件:
var lastKnownScrollPosition = 0;
var ticking = false;
function doSomething(scrollPosition) {
console.log(scrollPosition);
}
window.addEventListener('scroll', function(e) {
lastKnownScrollPosition = window.scrollY;
if(!ticking) {
window.requestAnimationFrame(function() {
doSomething(lastKnownScrollPosition);
ticking = false;
});
}
ticking = true;
});
答案 1 :(得分:0)
使用event.wheelDeltaY
或event.deltaY
鼠标console.log(event.wheelDeltaY)
:
用于触摸板:
而不是-120,它给出了-1.120,它出现在wheelDelta中实际上是水平滚动(wheelDeltaX
)的结果。(当你尝试使用触摸板放大时,也可能有轻微的水平运动)<登记/>
当它为0时不要缩放,你将获得一致的平滑变焦!
答案 2 :(得分:0)
var Scale = 1; document.addEventListener("wheel",function(e){ if(e.wheelDelta>0) Scale+=0.01; else Scale-=0.01; // use Scale variable .... e.preventDefault(); });