Przewijanie w poziomie za pomocą kółka myszy w div

Question

Jak przewijać poziomo w na div za pomocą myszki lub przeciągać za pomocą jquery?

---

Próbowałem przeciągane, byt w moim kodzie nie jest przydatne.

Teraz mam poziomy pasek przewijania. Czy istnieje możliwość przewijania zawartości w moim dziale za pomocą kółka myszy?

Answer 1

Napisałem tę wtyczkę dni temu.

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

Wypróbuj go z

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

szerokość elementu potomnego div powinny być szersze niż rodzic.

Jak 4000 px lub coś podobnego.

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

Answer 2

Spróbuj tego do poziomego przewijania za pomocą kółka myszy. Jest to czysta 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); 
    } 
})(); 

Oto demo, ale z document.body i window jako kierowane element: http://rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html

Answer 3

mam przepisany kod z odpowiedzią przez @ Anonymous-sałaty. Ponowne obliczenie szerokości elementu jest pomijane, ponieważ było niepotrzebne, a czasem niepożądane. Zapewnia to również dodatkową funkcję do przekazywania scroll-amount w px do wtyczki.

Używaj go tak:

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

Tu idzie uaktualnionej wtyczki 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(); 
     }) 
    }; 
}); 

Oto minified wersja tego samego 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()})}}); 

Tutaj to JSFiddle

Answer 4

Chciałbym dodać nieznaczną poprawę do odpowiedzi udzielonej przez @Taufik.

W kontekście es2015 modułu:

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; 

Główną różnicą jest: el.scrollLeft -= (e.wheelDelta || -e.detail);

Używanie e.wheelData bezpośrednio w zwoju offsetowego oznacza, że ​​możemy mieć bezwładność, dzięki czemu przewijanie może zwolnić stopniowo. Znalazłem to dobrze dla mnie.

Po prostu użyj w swoim kodzie tak (zakładając, że powyższy kod znajduje się w pliku o nazwie scroller.js):

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