Question

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

我尝试过拖拽，在我的代码中，它没用。

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

Answer 1

尝试使用鼠标滚轮进行水平滚动。这是纯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为目标元素：http://rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html

Answer 2

我已经从@ Anonymous-Lettuce的答案中重写了代码。跳过元素的宽度重新计算，因为它是不必要的，有时是不合需要的。这还提供了额外的功能，可以将scroll-amount中的px传递给插件。

像这样使用：

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

以下是JSFiddle

Answer 3

几天前写过这个插件。

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

Answer 4

我想对@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.wheelDelta || -e.detail);

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

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

import scroller from './scroller.js';
scroller();

Answer 5

您可以仅使用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
  }
})

Answer 6

纯`CSS`解决方案

您不需要Javascript或JQuery
有关更多信息：https://css-tricks.com/pure-css-horizontal-scrolling/

::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}

body {
  background: #111;
}

div {
  box-sizing: border-box;
}

.horizontal-scroll-wrapper {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: calc(250px + 1px);
  max-height: 750px;
  margin: 0;
  padding-top: 1px;
  background: #abc;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transform: rotate(-90deg) translateY(-250px);
          transform: rotate(-90deg) translateY(-250px);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}
.horizontal-scroll-wrapper > div {
  display: block;
  padding: 5px;
  background: #cab;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.squares {
  padding: 250px 0 0 0;
}
.squares > div {
  width: 250px;
  height: 250px;
  margin: 10px 0;
}

<div class="horizontal-scroll-wrapper squares">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

Answer 7

就我而言，我需要在调整浏览器大小时将滚动重新设置为正常，因此我对Izhar's代码进行了一些修改以使其适用于我的应用程序：

在浏览器调整大小时启动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; }
}

希望这可以帮助想要这样做的任何人。

用鼠标滚轮在div中水平滚动

7 个答案:

纯`CSS`解决方案

用鼠标滚轮在div中水平滚动

7 个答案:

纯CSS解决方案

纯`CSS`解决方案