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

Question

我可以从右向左滚动div，但在滚动鼠标滚轮时必须线性显示div。当前代码未显示“ liner”。 我的意思是我必须从右到左平稳显示。

您能帮我这个忙吗？

 (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); } })(); 

 #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; } 

 <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> 

Answer 1

（此答案已全部重写）

我检查了您的JSFiddle代码并找到了原因，为什么它总是以相同的速度滚动。 您的新滚动位置始终是currentPosition + wheeldelta 。 但这导致恒定的滚动速度。

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

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

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

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

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

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

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