Как применить правило «плавной прокрутки» для колесика мыши, jQuery?

Question

Как дела?Мой вопрос:

Как я могу контролировать или указывать способ прокрутки документа до желаемого положения, описанного либо колесом прокрутки мыши, и / или захватом полосы прокрутки.То, что я хотел бы, - это преодолеть конкретный метод прокрутки страницы по умолчанию.
По мере того, как он в настоящее время работает, страница переходит вправо на x # пикселей вниз за «вырез», который развивается на колесе прокрутки.Или идет прямо туда, где вы перетащите полосу прокруткиТо, что я ищу, - это простое расширение jquery, которое может применять определенные правила прокрутки. Принципы просты.Наложенное ускорение предотвратит слишком быстрое перемещение страницы без предварительного ускорения.устанавливается в виде скорости в пикс / с - с возможностью применения функций замедления ... Существует максимум пикс / сек, который страница может перемещать / перемещать / перетаскивать.и в-третьих, это правило замедления, применяемое по мере приближения страницы к ее месту назначения (в%, px?).Это может быть рассчитано одним из многих способов, и может быть сложнее.то есть при прокрутке последних 25 пикселей к месту назначения применяется замедление.Есть еще ... Главное, к чему я бы хотел подготовиться, - это обеспечить полную поддержку прокрутки небольших страниц, а не сбой.
Какой подход jQuery можно использовать для управления документом таким образом?_kyle

Update ::: Спасибо за то, что следите за этим Q, если вы.Отличные новости.Найден отличный плагин, который, мы надеемся, может быть обработан для поддержки желаемых эффектов, йо!Я реализовал целый контейнер страницы и использовал этот изящный скрипт jScrollPane для управления, если вы будете прокручивать страницу http://jscrollpane.kelvinluck.com/fullpage_scroll.html

Уже есть большая разница в производительности страницы.Каждая метка прокрутки на колесе составляет от трети до половины родной метки прокрутки в браузерах, поэтому она движется медленнее, что хорошо, и это настраиваемо.
Хотя у нас все еще есть метод перемещения страниц по принципу «срыв-срыв-срыв»,

Я сам пишу javascript, но, скорее, я переписываю его.Я думаю, что нужно сделать «очередь», состоящую из пикселей, которые нужно прокручивать по странице, с общим суммарным временем: и затем след анимации, определенный и выполненный в виде трех фаз, ускорения ускорения, фазы maxscrollspeed и замедления.Фаза.

Может кто-нибудь предложить какие-либо предложения относительно того, как мы

1. Освободим колесо mousescroll из его собственной функции прокрутки страницы.

2. прислушиваться к надрезам скручивания мышки;и в случае метки: инициализировать функцию ядра, чтобы начать движение страницы, но также прослушивать и добавлять дополнительные щелчки метки в «очередь», которая пересчитывается и применяется к прокрутке окна, заменяя предыдущий totaldistancetoscroll,перед вычислением следующего totaldistancetoscroll, который обеспечивает способ предвидеть пункт назначения и замедляться.Основные функции для начала движения не захотят перезапускать, потому что при ускорении, вероятно, произойдут множественные щелчки, но нужно просто пересчитать, когда и где нужно замедлить.

Извините еще разиз-за того, что еще не опубликовали какой-либо реальный код, не совсем уверен, с чего начать, и надеялся, что кто-то может знать, сработает ли для этого mwintent, и если да, то у него могут быть некоторые идеи, как применить замедление к прокрутке, которая, кажется, единственнаядве разницы между желаемым эффектом и состоянием текущих плагинов, которые похожи.

Answer 1

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

Благодаря ответу Ламбрика я нашел это решение:

$(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, упомянутый в сообщении Ламбрика.

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

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

РЕДАКТИРОВАТЬ: Обратите внимание, что я извлек вышеупомянутые функции в удобное плагин jquery .

Answer 2

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

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

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

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

• scrollTo (см. Также здесь )
• колесико мыши (см. Также здесь )

2.Событие мышиного колеса

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

$('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.Демо

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

Answer 3

Вы хотите попробовать этот вариант

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          : ''    
};

Answer 4

вот хорошее решение проверить это 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>

Answer 5

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

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

ДЕМО

Answer 6

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

Answer 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);

        });
}