Html 在div中使用鼠标滚轮进行水平滚动

如何使用鼠标滚轮在na div中水平滚动，或使用jquery拖动

---

我尝试过Dragable，但在我的代码中它没有用

---

现在我有了一个水平滚动条。是否可以使用鼠标滚轮滚动我的div中的内容？

几天前编写了此插件

 $.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 );
   });
}

试一下

$(document).ready(function(){
     $('#yourDiv').hScroll();
});

div的子元素的宽度应大于父元素的宽度

比如4000像素之类的

 <div id="yourDiv">
       <div style="width: 4000px;"></div>
 </div>

---

使用鼠标滚轮进行水平滚动时，请尝试此操作。这是纯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);
    }
})();

---

这是一个演示，但是有

document.body

和

window

作为目标元素：

我已经根据@Anonymous莴苣的答案重写了代码。跳过元素的宽度重新计算，因为它是不必要的，有时是不需要的。 这还提供了将

px

中的

scroll amount

传递给插件的附加功能

像这样使用它：

$(document).ready(function(){
    $('#your_div').hScroll(100); // You can pass (optionally) scrolling amount
});

升级后的插件

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

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

下面是同一个

jquery.hscroll.min.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();
        })
    };
});

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

这是你的电话号码

我想对@Taufik给出的答案稍加改进

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

主要区别在于：
el.scrollLeft-=（e.wheeldta | |-e.detail）

直接在滚动偏移中使用
e.wheelData
意味着我们可以有惯性，这样滚动可以逐渐减慢。我发现这对我很有效

只需在代码中这样使用（假设上述代码位于名为scroller.js的文件中）：

在我的情况下，我需要在调整浏览器大小时将滚动条重置回正常状态，因此我对代码进行了一些修改，以使其适用于我的应用程序：

在浏览器调整大小时启动hScroll：

$(function () {
     $(window).resize($('.horizontal-scroll').hScroll(60));
});

检查容器是否将空白属性设置为“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();
});

})

我使用此媒体查询更新空白属性：

@media (min-width: 768px) {
    .horizontal-scroll { white-space: nowrap !important; }
}

希望这能帮助任何想这样做的人。
您可以用javascrpt（无Jquery）以一种清晰的方式实现这一点，并允许垂直滚动：

const target=document.querySelector（'div'））
target.addEventListener（'wheel'，事件=>{
const toLeft=event.deltaY<0&&target.scrollLeft>0
const-toRight=event.deltaY>0&&target.scrollLeft
Pure
CSS
解决方案
您不需要使用
Javascript
或
JQuery
进行此操作

有关更多信息：


：：-webkit滚动条{
宽度：1px；
高度：1px；
}
：-webkit滚动条按钮{
宽度：1px；
高度：1px；
}
身体{
背景：#111；
}
div{
框大小：边框框；
}
.水平滚动包装器{
位置：绝对位置；
显示：块；
排名：0；
左：0；
宽度：计算（250px+1px）；
最大高度：750px；
保证金：0；
垫面：1px；
背景：#abc；
溢出y：自动；
溢出x：隐藏；
-webkit变换：旋转（-90度）translateY（-250像素）；
变换：旋转（-90度）translateY（-250像素）；
-webkit变换原点：右上方；
变换原点：右上角；
}
.水平滚动包装器>div{
显示：块；
填充物：5px；
背景：#驾驶室；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
-webkit变换原点：右上方；
变换原点：右上角；
}
.正方形{
填充：250px0；
}
.squares>div{
宽度：250px；
高度：250px；
利润率：10px0；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
谢谢这正是我想要的。最后是一个不建议使用JQuery插件的答案。顺便说一句：如果其他任何人遇到任何问题，请尝试在所有html之后添加它。示例-如果要在元素一直向左或向右滚动后垂直滚动，可以包装
e.preventDefault（）使用此if语句：
if（（delta>0&&document.getElementById（'yourDiv'）.scrollLeft>0）| |（delta<0&&document.getElementById（'yourDiv'）.offsetWidth+document.getElementById（'yourDiv'）.scrollLeft
（在Chrome和Firefox上测试）如何将其实现到div？@Arthur
应该做哪些更改以使其滚动到另一个方向？对于
写入模式：例如，垂直rl
网站运行良好，在启用水平滚动的jquerydatatable上测试（不需要重新计算宽度）。您可能想为此创建一个github回购协议。我可能会，稍后我会尝试。从未使用过Github。我认为这非常简单。您甚至可以添加一些“平滑”行为，只需使用scrollBy而不是显式设置滚动位置，例如：target.scrollBy（{left:event.deltaY*0.5，behavior:'smooth'}）；这将是伟大的，如果它真的使滚动平滑。在我的笔上试试：效果不错，但方向不对：向下移动鼠标滚轮会向右移动。如何更改它以使鼠标向上移动到右侧？然后您可以将第9行更改为
-=
。谢谢！！