Question

我可以从右侧向左侧滚动div但是我必须在滚动鼠标滚轮时线性显示div。当前代码未显示衬垫。我的意思是我必须从右到左顺利显示。

你能帮助我吗？

＆＃13;

(function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('gentags').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
    }
})();

＆＃13;

#gentags {
position:relative;
margin-top: -.25em;
display: inline-block;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}

#gentags > div{
    overflow: hidden;
    width:200%;
}

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}

.horizontal_scroll .full_screen_100 article{
    width: 12.58%;
    height: 100%;
    float:left;
    border-left: solid 1px #E2E2E2;

}

＆＃13;

<div id="gentags">
   <div class="horizontal_scroll">
		<div class="full_screen_100" id="left_scroll">
			<article><div><p class="scroll_number">01</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">02</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">03</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">04</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">05</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">06</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
	 </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

Answer 1

（这个答案完全被重写）

我已经检查了你的JSFiddle代码并找到了原因，为什么它始终以相同的速度滚动。您的新滚动位置始终为currentPosition + wheeldelta。但这会导致滚动速度不变。

解决方案（如上一个答案中所述）：计算当前滚动动画的END，并在每个车轮旋转时递增它。意思是：你需要一个虚拟的全局计数器（= aniamtion结束时）页面滚动位置（xScroll）。它被初始化为0，并且每次发出wheel事件时都会以速度值递增。然后滚动到这个新的xScroll。

但仍有一些问题：
1.即使滚动条已到达内容的左侧或右侧，用户也可以进一步滚动（因此更改xScroll）。如果用户现在滚动到另一个方向，xScroll仍然太大（或小），导致可见动画的开始延迟。为了避免这些过冲，我引入了xScroll的限制 - 实际上是零（完全左）和可滚动内容的宽度（完全正确）。 2.每个浏览器为一次鼠标旋转提供不同的增量，当使用deltaY计算新的xScroll时会产生巨大的速度差异。为了解决这个问题，我们仅确定旋转方向（delta>或＆lt; 0）并且否定或不否定自选速度值（在我的情况下为120）。现在，每次旋转滚轮时，平滑滚动动画的结束将递增或递减120px - 具体取决于滚动方向。
3.目前，我们只收听滚轮事件并更新每个车轮旋转的xScroll。但是，如果用户通过滚动条滚动然后再次切换到鼠标滚轮，则xScroll的值不正确，因为滚动条事件未被条形图触发。这导致滚动位置来回跳跃。但是，每次触发滚动事件时，我们都不能简单地将xScroll更新为当前滚动位置，因为平滑动画会突然停止（因为它们的结束xScroll现在设置为当前滚动位置）。解决方案非常脏，但有效：全局标志ignore，如果滚动事件的当前调用是由鼠标滚轮启动或者是跟随动画，则为true，否则为false（ - ＆gt;由滚动条启动）。如果ignore为false，则每次scoll事件都会更新xScroll，否则不会。

这听起来非常复杂，对我来说似乎也很脏，但它适用于最新的浏览器。

即使用户通过滚动条滚动，我也无法实现平滑滚动。但我认为，这不是必要的。实际上我认为这个横向滚动会给用户带来非常糟糕的体验（在手机上会发生什么？），但是，嘿，这不是问题。

你原来的小提琴：jsfiddle.net/3s5su2q3/6 /

我的解决方案：jsfiddle.net/3s5su2q3/14 /

P.S。：您的事件监听器已被弃用。在我的解决方案中，我使用了新标准（兼容性：https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent）。不过，请随意添加对旧浏览器的支持。

如何使用鼠标滚轮线性动画div动画？

1 个答案: