Firefox игнорирует плавную прокрутку при нажатии кнопки прокрутки вверх и второй раз подряд - PullRequest
Новая
       26

Firefox игнорирует плавную прокрутку при нажатии кнопки прокрутки вверх и второй раз подряд

0 голосов
/ 22 апреля 2020

Я испытываю странное поведение в Firefox 75 со следующим кодом:

HTML: 

<html>
<body>

<div>
Lorem ipsum dolor sit amet consectetur adipiscing elit sociis vivamus euismod, netus arcu pulvinar egestas cras commodo fames dui nostra tortor quam, class duis sagittis fusce pellentesque conubia ornare venenatis hac. Quis pretium nulla ad nisi aliquam euismod nunc, consequat fermentum sociis eros felis tempus, tortor a risus dignissim fusce facilisis. Fermentum erat eget libero tellus semper gravida enim rhoncus, placerat natoque mauris sollicitudin class eros tincidunt augue volutpat, penatibus vel interdum nunc cubilia taciti dictumst.
...
(the rest is omitted for brevity)
</div>

<a rel="nofollow" href="#" class="scroll-to-top-link">
    Go to top link
</a>

<button class="scroll-to-top-button">
    Go to top button
</button>

</body>
</html>

JS: 

( function() {
    'use strict';

    // Feature Test
    if ( 'querySelector' in document && 'addEventListener' in window ) {

        var goTopBtnLink = document.querySelector( '.scroll-to-top-link' );
        var goTopBtnButton = document.querySelector( '.scroll-to-top-button' );

        var nativeSmoothScroll = function () {
            window.scroll({
                top: 0,
                left: 0,
                behavior: 'smooth'
            });
        };

        goTopBtnLink.addEventListener( 'click', function( e ) {
            e.preventDefault();
            nativeSmoothScroll();
        });

        goTopBtnButton.addEventListener( 'click', function( e ) {
            nativeSmoothScroll();
        });

    }

} )();

На странице есть ссылка прокрутки вверх и кнопка прокрутки вверх внизу. Если я нажму на ссылку, страница плавно переместится наверх. Когда я нажимаю кнопку тоже, но только в первый раз. В последующее время страница прокручивается слишком быстро, игнорируя параметр behavior: 'smooth'.

Я поместил весь код на скрипку:

https://jsfiddle.net/mf4rz8hj/9/

Chrome не показывает это поведение. Есть идеи?

Ответы [ 2 ]

0 голосов
/ 25 апреля 2020

Если удалить некоторые стили элемента button, проблема исчезнет. 

button {
    -webkit-appearance: button;
    background-color: transparent;
    border-style: solid; /* remove this */
    border-width: 1px;
    border-radius: 2px;
    color: inherit;
    cursor: pointer;
    padding: 0.4278em 1.25em; /* or remove this */
    -webkit-transition: color 0.25s ease, background-color 0.25s ease;
    transition: color 0.25s ease, background-color 0.25s ease;
}

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

0 голосов
/ 22 апреля 2020

Почему бы вам не сделать это с CSS? 

html {
    scroll-behavior: smooth;
}

Это не работает на IE и Safari.

...