html - div でのマウス ホイールによる水平スクロール

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なる要素として: https://taufik-nurrohman.github.io/dte-project/full-page-horizo ​​ntal-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 の子要素の幅は、親よりも広くする必要があります。

4000pxとか。

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

Answer 4

純粋なCSSソリューション

あなたはこれを必要JavascriptとJQuery
しませ ん。

::-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>