Может ли этот сценарий плавной прокрутки быть реализован и работать со средой Next. js и React - PullRequest
Новая
       74

Может ли этот сценарий плавной прокрутки быть реализован и работать со средой Next. js и React

0 голосов
/ 05 марта 2020

У меня есть эффект параллакса на моем веб-сайте, и я хочу сгладить его с помощью плавной прокрутки, но этот скрипт не может работать с моим Next. js и React Environment, я пробовал различные виды библиотек с плавной прокруткой из Github и никто из них не работает с моей средой?

Есть ли проблемы с этим кодом, которые мешают его выполнению в моей среде? 

init() {
        new SmoothScroll(document, 120, 12)
    }

    SmoothScroll(target, speed, smooth) {
        if (target === document)
            target = (document.scrollingElement
                || document.documentElement
                || document.body.parentNode
                || document.body) // cross browser support for document scrolling

        var moving = false
        var pos = target.scrollTop
        var frame = target === document.body
            && document.documentElement
            ? document.documentElement
            : target // safari is the new IE

        target.addEventListener('mousewheel', scrolled, { passive: false })
        target.addEventListener('DOMMouseScroll', scrolled, { passive: false })

        function scrolled(e) {
            e.preventDefault(); // disable default scrolling

            var delta = normalizeWheelDelta(e)

            pos += -delta * speed
            pos = Math.max(0, Math.min(pos, target.scrollHeight - frame.clientHeight)) // limit scrolling

            if (!moving) update()
        }

        function normalizeWheelDelta(e) {
            if (e.detail) {
                if (e.wheelDelta)
                    return e.wheelDelta / e.detail / 40 * (e.detail > 0 ? 1 : -1) // Opera
                else
                    return -e.detail / 3 // Firefox
            } else
                return e.wheelDelta / 120 // IE,Safari,Chrome
        }

        function update() {
            moving = true

            var delta = (pos - target.scrollTop) / smooth

            target.scrollTop += delta

            if (Math.abs(delta) > 0.5)
                requestFrame(update)
            else
                moving = false
        }

        var requestFrame = function () { // requestAnimationFrame cross browser
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (func) {
                    window.setTimeout(func, 1000 / 50);
                }
            );
        }()
    }
...