是否可以通过鼠标滚轮水平滚动div,而无需保持移位?
我知道使用mousewheel插件的方法:
$("#test").mousewheel(function(event, delta) {
var current = $(this).scrollLeft();
$(this).scrollLeft(current - (delta * 80));
});
我试图用$(this).animate...
滚动它但它仍然看起来很难看。
滚动时我不需要模拟浏览器内置的平滑度,因为它不是跨浏览器的方式,我需要自然地滚动它。
也许模拟转移持有mouseenter
事件?
诀窍是从qazxsw poi中检索qazxsw poi ...然后使用jQuery .deltaY
。
由于三角洲总是.originalEvent
或.scrollLeft()
...你可以33.33333206176758
并除以-33.33333206176758
。然后你将总是得到parseInt()
或33
,你可以乘以你希望滚动的像素数量,在X轴上,每轮旋转。
1
-1
// Variable to store current X scrolled position.
var current = 0;
// Pixel increment you wish on each wheel spin.
var ScrollX_pixelPer = 40;
// Event handler.
$("#test").on("mousewheel", function(e) {
e.preventDefault();
// Get the deltaY (always +/- 33.33333206176758) and multiply by the pixel increment you wish.
var delta = ScrollX_pixelPer*(parseInt(e.originalEvent.deltaY)/33);
// Increment/decrement current.
current += delta;
//console.log(current);
// Apply the new position.
$(this).scrollLeft(current);
});
所以我最近很难实现这个功能,我发现只要鼠标轮事件似乎不再受支持,可能是使用当前浏览器的最佳解决方案是:
#test{
height:2.5em;
overflow-y:scroll;
white-space:nowrap;
}
.spacer{
height:400px;
}
我知道这有点晚了,但我一直在寻找答案,并且在玩Louys的代码时,我发现了一些看似更好的东西。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spacer"></div>
<div id="test">
Lorem ipsum dolor sit amet, no mel volutpat consequat. Doctus sanctus nec no, mea ei augue appellantur. Pro doming vocibus accusam at, eum ut alii debet temporibus. No qui suas utinam splendide, essent fastidii invidunt est et, cum an brute explicari neglegentur. Nihil putant invenire ea vix. Quis congue epicuri sed cu, ad errem nusquam mel. Commune fabellas rationibus te mea, vim ne justo illum sensibus.
</div>
<div class="spacer"></div>
它基本上不需要一个变量来跟踪scroll_to位置,因为它从scrollLeft()获取值并且只是减去delta,基本上解决了以前版本出现的两个问题,一个是函数现在不滚过去元素的总宽度并没有变为负数,其次是如果你现在使用滚动条更改滚动位置,它不会像以前那样搞乱代码。
(我也删除了ScrollX_pixelPer,因为我认为你不需要一个简单数字的整个变量)