Question

我在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浏览器未显示此行为。有什么想法吗？

Answer 1

为什么不使用CSS？

gender1 = np.array(data_dict['Gender'])
age1 = np.array(data_dict['Age'])

age_females = age1[np.where(gender1 == 'Female')]
age_males = age1[np.where(gender1 == 'Male')]


plt.hist(age_males,label='Males',alpha=0.5)
plt.hist(age_females,label='Females',alpha=0.5)
plt.legend()
plt.title('Histogram of Accidents by Age and Genders')
plt.xlabel('Age')
plt.ylabel('Accidents')
plt.xticks(ticks=np.arange(10,110,step=10),labels=(10,20,30,40,50,60,70,80,90,100))
print

这不适用于IE和Safari。

Answer 2

如果我删除了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代码毫无意义。

Firefox连续第二次单击顶部滚动按钮时，会忽略平滑滚动

2 个答案: