[英]JavaScript mousewheel event to scroll page horizontally when vertical scroll
我试图检测用户何时在固定高度的元素上向上或向下滚动并更新该元素的transform:相应地将translationX CSS值向左或向右滚动两个内容。 但是,我不知道如何从增量中获得适当的值。
document.getElementById("list").addEventListener("wheel", myFunction);
function myFunction(event) {
var matrix = $('.gallery-list').css('transform').split(/[()]/)[1];
var y = parseInt(event.deltaY);
var posX = parseInt(matrix.split(',')[4]);
console.log(y);
console.log(posX);
console.log(y + posX);
//$('.gallery-list').css('transform', 'translateX('+posX + y+'px)');
}
这是这里的Codepen: https ://codepen.io/kylehagler/pen/OKxMGr
将此添加到您的CSS:
.outside {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
position: absolute;
}
将图库列表div周围包含:
<div id="outside" class="outside">
最后,这是JS:
document.getElementById("outside").addEventListener("wheel", myFunction);
var total = 0;
function myFunction(event) {
var y = parseInt(event.deltaY);
total += y;
$(".gallery-list").css('transform', 'translateX(' + total + 'px)');
}
希望这可以帮助 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.