[英]Scroll only a div horizontally
我需要的是有一个带有背景图像的div和另一个将水平滚动的.png图像。 http://prntscr.com/9d0d25
我需要背景保持固定,并且X和Z汽车在向下滚动时向右水平移动(在向上滚动时向左移动。当看不见汽车时,我希望网站继续垂直滚动到另一个)网站内容(以及向上滚动以使div与.png一起水平向后滚动时)
html结构是这样的:
<div class="bgimage"> // has a background in css
<div class="cars">
<img src="images/cars.png" />
</div>
</div>
<div class="othercontent">
</div>
但是我几乎没有JavaScript的经验,所以我不知道如何实现。
(我用视差进行了搜索,但发现的示例仅适用于水平或垂直网站,但响应速度不是很好”
如果您使用Jquery,则可以使用$(window).on('scroll', function(){})
来监视滚动事件
这是我做的一个简单的事情:
var lastScrollTop = 0;
$(window).on('scroll', function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
//Scrolling Down
$('.cars').css('left',st + "px");
} else {
//Scrolling Up
$('.cars').css('left', st + "px");
}
});
鼠标滚轮运动
var mouseWheelEvt = function (event) {
if (document.body.doScroll)
document.body.doScroll(event.wheelDelta>0?"left":"right");
else if ((event.wheelDelta || event.detail) > 0)
document.body.scrollLeft -= 10;
else
document.body.scrollLeft += 10;
return false;
}
document.body.addEventListener("mousewheel", mouseWheelEvt);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.