библиотека jQuery прокрутки колесом прокрутки по горизонтали

в настоящее время я разрабатываю горизонтально веб-сайт, который может включить прокрутку мыши для прокрутки влево и вправо...

мой jQuery включил последовательность:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<!--jquery validation script-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

<!--Smooth Scroll-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

мой код, как показано ниже:

<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>


<script>
$.noConflict();

$(function() {
        $("body").mousewheel(function(event,delta) {
            this.scrollLeft -= (delta * 30);

            event.preventDefault();
        })
    })

$(function() {...});

$(document).ready(function() {

        $('#form').validate({...});

        $("#submit").click(function()
        {...});
    })
</script>

мой CSS" тела", как показано ниже:

html {
width:100%;
overflow-y:hidden;
overflow-x: scroll;
}
body{

}

на данный момент код, в котором я сомневаюсь:

<!--Smooth Scroll-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

который рушится с прокруткой мыши, я думаю.

прокрутка мыши работает, единственная проблема-прокрутка мыши не гладко, иногда останавливаюсь там, иногда не могу даже двигаться, это не моя проблема с мышью. Я не уверен, что это вызывает, потому что я пытался отладить его в течение 2 дней. Кто-нибудь хочет поделиться своими мыслями по этому вопросу?

Я нашел решение, но это выглядело странно в моем случае. Прокрутите до определенной части и застревайте посередине. (Только полоса прокрутки.) Я использую Chrome на Mac для тестирования. Кстати, есть ли какое-либо решение, такое как AutoShift при прокрутке, потому что это сработало для меня, когда Я нажал кнопку переключения.

12
css html jquery mousewheel

4 ответов

после 3 дней поиска ответа я, наконец, нашел решение без плагинов Jquery!

// http://www.dte.web.id/2013/02/event-mouse-wheel.html
(function() {
function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.documentElement.scrollLeft -= (delta*40); // Multiplied by 40
    document.body.scrollLeft -= (delta*40); // Multiplied by 40
    e.preventDefault();
}
if (window.addEventListener) {
    // IE9, Chrome, Safari, Opera
    window.addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
    // IE 6/7/8
    window.attachEvent("onmousewheel", scrollHorizontally);
}
})();

если этот код все еще не будет работать, проблема не здесь, это в вашем CSS.

23

Это версия jQuery @TooJuniorToCode'ы ответ. Код намного короче и это может быть полезным для кого-то.

    $('body').on('mousewheel DOMMouseScroll', function(event){

        var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail)));

        $(this).scrollLeft( $(this).scrollLeft() - ( delta * 40 ) );
        event.preventDefault();

    });
6

для прокрутки сайта по горизонтали, пожалуйста, следуйте ниже кода:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

прикрепленное событие колеса мыши для тела:

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});

посмотреть демо-версию:

http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

2
    $("html, body").mousewheel(function(event, delta) {
        this.scrollLeft -= (delta * 30);
        event.preventDefault();
    });

Chrome имеет прокрутку на теле, Firefox имеет прокрутку на html

-1