我能够从右侧向左侧滚动 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>（此答案已完全重写）
我检查了你的 JSFiddle 代码并找到了原因，为什么它总是以相同的速度滚动。您的新滚动位置始终为currentPosition + wheeldelta。但这会导致滚动速度恒定。
解决方案（如上一个答案）：计算当前滚动动画的 END 并随着每次轮子旋转增加它。意思是：您需要一个用于虚拟（=动画结束时）页面滚动位置 (xScroll) 的全局计数器。它被初始化为 0 并在每次触发轮事件时增加一个速度值。然后你滚动到这个新的 xScroll。
但是仍然存在一些问题：
1. 用户可以进一步滚动（因此更改 xScroll），即使滚动条已到达内容的左侧或右侧。如果用户现在向另一个方向滚动，xScroll 仍然太大（或太小），从而导致可见动画的启动延迟。为了避免这些过冲，我为 xScroll 引入了限制——实际上是零（完全左侧）和可滚动内容的宽度（完全右侧）。2、每个浏览器为鼠标旋转一圈提供了不同的delta，导致在使用deltaY计算新的xScroll时速度差异很大。为了解决这个问题，我们只确定旋转方向（delta > 或 < 0）并否定或不否定自我选择的速度值（在我的情况下为 120）。现在，每当轮子转动时，
3. 目前，我们只监听滚轮事件并在每次滚轮旋转时更新我们的 xScroll。但是如果用户通过滚动条滚动然后再次切换到鼠标滚轮，xScroll 的值是错误的，因为滚轮事件不是由滚动条触发的。这导致滚动位置来回跳跃。但是我们不能在每次触发滚动事件时简单地将 xScroll 更新到当前滚动位置，因为那样平滑的动画会突然停止（因为它们的结束 xScroll 现在被设置为当前滚动位置）。解决方案很脏，但有效：全局标志ignore，如果当前滚动事件的调用是由鼠标滚轮启动的，则为 true，否则为 false（-> 由滚动条启动）。如果 ignore 为 false，则 xScroll 在每个 scoll 事件上更新，否则不会。
这听起来很复杂，对我来说也很脏，但它适用于最新的浏览器。
即使用户通过滚动条滚动，我也无法实现平滑滚动。但我认为，这并不是真正必要的。实际上，我认为这种水平滚动提供了非常糟糕的用户体验（在手机上会发生什么？），但是，嘿，这不是问题。
你原来的小提琴：jsfiddle.net/3s5su2q3/6/
我的解决方案：jsfiddle.net/3s5su2q3/14/
PS：您的事件侦听器已被弃用。在我的解决方案中，我使用了新标准（兼容性：https : //developer.mozilla.org/en-US/docs/Web/API/WheelEvent）。不过，请随意添加对旧浏览器的支持。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句