Html 在div中使用鼠标滚轮水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11700927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal scrolling with mouse wheel in a div
提问by Daniel Koczu?a
How to scroll horizontal in na div with mouse whell, or drag with jquery?
如何使用鼠标滚轮在 na div 中水平滚动，或使用 jquery 拖动？
I've tried draggable, byt in my code it's not usefull.
我试过可拖动，但在我的代码中它没有用。
Now I've got a horizontal scrollbar. Is there a posibility to scroll the content in my div with mouse wheel?
现在我有了一个水平滚动条。是否可以使用鼠标滚轮滚动 div 中的内容？
回答by Taufik Nurrohman
Try this for horizontal scrolling with mouse wheel. This is pure JavaScript:
尝试使用鼠标滚轮进行水平滚动。这是纯 JavaScript：
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('yourDiv').scrollLeft -= (delta*40); // Multiplied by 40
e.preventDefault();
}
if (document.getElementById('yourDiv').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('yourDiv').addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('yourDiv').addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('yourDiv').attachEvent("onmousewheel", scrollHorizontally);
}
})();
Here's a demo, but with document.bodyand windowas a targetted element: http://rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html
这是一个演示，但带有document.body和window作为目标元素：http: //rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html
回答by Izhar Aazmi
I have rewritten the code from the answer by @Anonymous-Lettuce. The width recalculation of the element is skipped as it was unnecessary and sometimes undesirable.
This also provides additional feature to pass scroll-amountin pxto the plugin.
我已经重写了@Anonymous-Lettuce 的答案中的代码。元素的宽度重新计算被跳过，因为它是不必要的，有时也是不可取的。这也提供了额外的功能，通过scroll-amount在px该插件。
Use it like this:
像这样使用它：
$(document).ready(function(){
$('#your_div').hScroll(100); // You can pass (optionally) scrolling amount
});
Here goes the upgraded plugin jquery.hscroll.js:
这是升级后的插件jquery.hscroll.js：
jQuery(function ($) {
$.fn.hScroll = function (amount) {
amount = amount || 120;
$(this).bind("DOMMouseScroll mousewheel", function (event) {
var oEvent = event.originalEvent,
direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
position = $(this).scrollLeft();
position += direction > 0 ? -amount : amount;
$(this).scrollLeft(position);
event.preventDefault();
})
};
});
Here is the minified version of the same jquery.hscroll.min.js:
这是相同的缩小版本jquery.hscroll.min.js：
jQuery(function(e){e.fn.hScroll=function(l){l=l||120,e(this).bind("DOMMouseScroll mousewheel",function(t){var i=t.originalEvent,n=i.detail?i.detail*-l:i.wheelDelta,o=e(this).scrollLeft();o+=n>0?-l:l,e(this).scrollLeft(o),t.preventDefault()})}});
Here is the JSFiddle
这是JSFiddle
回答by Ivan Ivkovi?
Wrote this plugin days ago.
几天前写了这个插件。
$.fn.hScroll = function( options )
{
function scroll( obj, e )
{
var evt = e.originalEvent;
var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta;
if( direction > 0)
{
direction = $(obj).scrollLeft() - 120;
}
else
{
direction = $(obj).scrollLeft() + 120;
}
$(obj).scrollLeft( direction );
e.preventDefault();
}
$(this).width( $(this).find('div').width() );
$(this).bind('DOMMouseScroll mousewheel', function( e )
{
scroll( this, e );
});
}
Try it out with
试试看
$(document).ready(function(){
$('#yourDiv').hScroll();
});
The width of the child element of the div should be wider than the parent.
div 的子元素的宽度应该比父元素宽。
Like 4000 px or something.
像 4000 像素什么的。
<div id="yourDiv">
<div style="width: 4000px;"></div>
</div>
回答by Michael Giovanni Pumo
I'd like to add a slight improvement to the answer given by @Taufik.
我想对@Taufik 给出的答案稍加改进。
In the context of an es2015module:
在es2015模块的上下文中：
const el = document.querySelector('#scroller');
function scrollHorizontally(e) {
e = window.event || e;
e.preventDefault();
el.scrollLeft -= (e.wheelDelta || -e.detail);
}
function init() {
if (!el) {
return;
}
if (el.addEventListener) {
el.addEventListener('mousewheel', scrollHorizontally, false);
el.addEventListener('DOMMouseScroll', scrollHorizontally, false);
} else {
el.attachEvent('onmousewheel', scrollHorizontally);
}
}
export default init;
The main difference being: el.scrollLeft -= (e.wheelDelta || -e.detail);
主要区别在于： el.scrollLeft -= (e.wheelDelta || -e.detail);
Using the e.wheelDatadirectly in the scroll offset means we can have the inertia, so that the scrolling can slow down gradually. I found this worked well for me.
在使用e.wheelData直接在滚动补偿装置我们可以有惯性，这样滚动可以逐步放缓。我发现这对我很有效。
Just use in your code like so (assuming the above code is in a file called scroller.js):
像这样在你的代码中使用（假设上面的代码在一个名为scroller.js的文件中）：
import scroller from './scroller.js';
scroller();
回答by tqrecords
In my case I needed to reset the scroll back to normal when the browser was resized, so I modified Izhar'scode a bit to make it work for my application:
在我的情况下，我需要在调整浏览器大小时将滚动重置为正常，因此我稍微修改了Izhar 的代码以使其适用于我的应用程序：
Initiate hScroll on browser resize:
在浏览器调整大小时启动 hScroll：
$(function () {
$(window).resize($('.horizontal-scroll').hScroll(60));
});
Check if container has white-space property set to 'nowrap' and return if not:
检查容器是否将 white-space 属性设置为“nowrap”，如果没有则返回：
$.fn.hScroll = function (amount) {
var $this = $(this);
amount = amount || 120;
$this.bind('DOMMouseScroll mousewheel', function (event) {
var isHorizontal = $('.horizontal-scroll').css('white-space') == 'nowrap';
if (!isHorizontal) return;
var oEvent = event.originalEvent,
direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
position = $this.scrollLeft();
position += direction > 0 ? -amount : amount;
$this.scrollLeft(position);
event.preventDefault();
});
};
};
I use this media query to update the white-space property:
我使用这个媒体查询来更新 white-space 属性：
@media (min-width: 768px) {
.horizontal-scroll { white-space: nowrap !important; }
}
Hope this helps anyone wanting to do the same.
希望这可以帮助任何想做同样事情的人。
回答by Luciano Felix
You can do that with just javascrpt (no Jquery) in a clear way and also allow vertical scrolling:
您可以仅使用 javascrpt（无 Jquery）以清晰的方式做到这一点，并且还允许垂直滚动：
const target = document.querySelector('div')
target.addEventListener('wheel', event => {
const toLeft = event.deltaY < 0 && target.scrollLeft > 0
const toRight = event.deltaY > 0 && target.scrollLeft < target.scrollWidth - target.clientWidth
if (toLeft || toRight) {
event.preventDefault()
target.scrollLeft += event.deltaY
}
})
