Как обеспечить соблюдение правила "гладкой прокрутки" для mousewheel, jQuery?

Ответ 1

То, что я хотел сделать, это симулировать плавную прокрутку браузера в браузерах, которые его не поддерживают, отключили по умолчанию или имеют плохую реализацию.

Благодаря lumbric ответу я придумал это решение:

$(function () {

    var top = 0,
        step = 55,
        viewport = $(window).height(),
        body = $.browser.webkit ? $('body') : $('html'),
        wheel = false;


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

        wheel = true;

        if (delta < 0) {

            top = (top+viewport) >= $(document).height() ? top : top+=step;

            body.stop().animate({scrollTop: top}, 400, function () {
                wheel = false;
            });
        } else {

            top = top <= 0 ? 0 : top-=step;

            body.stop().animate({scrollTop: top}, 400, function () {
                wheel = false;
            });
        }

        return false;
    });

    $(window).on('resize', function (e) {
        viewport = $(this).height();
    });

    $(window).on('scroll', function (e) {
        if (!wheel)
            top = $(this).scrollTop();
    });

});

Поместите некоторый контент на свою страницу достаточно долго, чтобы иметь полосы прокрутки. Затем используйте колесико мыши. Он работает в каждом браузере. Я использовал jQuery-1.7.2 и плагин mousescroll, упомянутый в сообщении lumbric.

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

Также вы можете изменить скорость анимации, кроме того, что остальная часть логики кода необходима для правильной работы.

EDIT: Обратите внимание, что я извлек вышеупомянутую функциональность в удобный плагин jquery.

Ответ 2

У меня была очень простая проблема. Я хотел изменить функцию прокрутки обычной страницы. Я хочу, чтобы каждый свиток был точно определенной высоты, чтобы страница останавливалась только в очень определенных положениях.

Я понял это следующим образом:

1. Используемые плагины

Загрузите и включите следующие 2 плагина jQuery и сам jQuery:

• scrollTo (см. также здесь)
• mousewheel (см. также здесь)

2. Событие Mousewheel

Самый простой способ - использовать штекер mousewheel таким образом:

$('body').mousewheel(function(event, delta) { /* code here */ });

Затем переменная дельта отрицательна или положительна, в зависимости от того, было ли прокручено колесо вверх или вниз. Если вы вернете false, я думаю (!) Он отключает обычный прокрутки.

3. Метод прокрутки

Чтобы прокрутить страницу, я использовал scrollTo, но любой другой плагин (например, Smooth Scroll, предложенный в другом ответе) также должен сделать это.

4. Полный код

Поместите это в головную часть HTML файла:

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {          
        $('body').mousewheel(function(event, delta) {
            # This if might not be very elegant!
            if (delta < 0) {
                $('body').scrollTo('+=100', 1500 );
            }
            else
                $('body').scrollTo('-=100', 1500 );

            return false;
        });
    });
</script>

5. Demo

Здесь я создал демо: http://pastehtml.com/view/ba0ziusqk.html

Ответ 3

Карл Сведберг создал плагин jQuery под названием Smooth Scroll, который звучит так, как будто это может быть именно то, что вам нужно.

Ответ 4

мое решение с мобильным эффектом

    <div id="parent">
    <div id="child">aaa aaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaa</div>

        #parent {
        width: 300px;
        height: 300px;
        background-color: #aaa;
        margin: auto auto;
        overflow: hidden;
    }
    #child {
        width: 200px;
        height: 800px;
        background-color: #999;
        margin: auto auto;
        text-align: justify;
        position: relative;
        top: 0;
        -webkit-transition: all 0.5s ease-out;
}




$('#parent').bind('mousewheel', function (e) {
        if (!(e.originalEvent.wheelDelta == 120)) {
            var top = parseInt($("#child").css("top"));
            $("#child").css("top", (top - 100) + "px");
            top = parseInt($("#child").css("top"));
            if (top <= -500) {
                setTimeout(function () {
                    $("#child").css("top", "-500px");
                }, 100);
            }
        } else {
            var top = parseInt($("#child").css("top"));

            $("#child").css("top", (top + 100) + "px");
            top = parseInt($("#child").css("top"));
            if (top >= 0) {
                setTimeout(function () {
                    $("#child").css("top", "0");
                }, 100);
            }
        }
    });

ДЕМО

Ответ 5

Вы хотите дать этому попробовать

https://github.com/galambalazs/smoothscroll-for-websites

у него есть хорошие настройки для настройки анимации и, кажется, в хорошем состоянии.

// Scroll Variables (tweakable)
var defaultOptions = {

    // Scrolling Core
    frameRate        : 100, // [Hz]
    animationTime    : 1200, // [ms]
    stepSize         : 80, // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Acceleration
    accelerationDelta : 50,  // 50
    accelerationMax   : 3,   // 3

    // Keyboard Settings
    keyboardSupport   : true,  // option
    arrowScroll       : 50,    // [px]

    // Other
    touchpadSupport   : false, // ignore touchpad by default
    fixedBackground   : true, 
    excluded          : ''    
};

Ответ 6

вот хорошее решение, проверьте это http://ataredo.com/morphology/lucidscroll/

<script src="file-directory/jquery.js"></script>
<script src="file-directory/lucid.js"></script>

<script>
$(window).on('load', function() {

  $(this).impulse();
});
</script>

Ответ 7

var $window              = $(window),
    scrollDistance   = 300,
    scrollSpeed      = 500,
    scrollEffect     = 'swing',
    scrollAmount     = 1,
    smoothScroll;

if (! ('ontouchstart' in document.documentElement) && ! $('body').hasClass('modal-open')) {

        $window.on("mousewheel DOMMouseScroll", function (event) {

            event.preventDefault();

            if (smoothScroll) {

                // Start scrolling while waiting for final scoll amount (user stopped wheeling)
                if (scrollAmount == 1) {
                    var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
                    var finalScroll = $window.scrollTop() - parseInt(delta * (scrollDistance * scrollAmount));

                    $('html, body').stop().animate({ scrollTop: finalScroll }, scrollSpeed, scrollEffect);
                }

                // Increase scroll amount
                scrollAmount++;

                // Clear current timeout
                clearTimeout(smoothScroll);
            }

            // Set animated scroll
            smoothScroll = setTimeout(function() {

                var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
                var scrollTop = $window.scrollTop();
                var finalScroll = scrollTop - parseInt(delta * (scrollDistance * scrollAmount));

                // Reset scroll amoount
                scrollAmount = 1;

                $('html, body').stop().animate({ scrollTop: finalScroll },
                    (scrollSpeed*scrollAmount),
                    scrollEffect
                );

                // Clear timeout holder
                smoothScroll = null;

            }, 100);

        });
}

Ответ 8

намного лучший способ. https://github.com/inuyaksa/jquery.nicescroll

это станет для меня идеальным решением.

по запросу пользователей. скачать libiray (demo) и добавить к началу

// 1. Simple mode, it styles document scrollbar:
$(document).ready(function() {  
    $("body").niceScroll();
});