在Firefox中滚动的空白页

Question

我有一个简单的手风琴，内容丰富。单击容器外部时它应该关闭。当我尝试通过滚动条向下滚动内容时出现问题，我得到了一个空白页。此错误仅在Firefox中复制。在其他浏览器中，即使在IE11中也可以正常工作。

    const block = document.querySelector('.block');
    const collapse = document.querySelector('.collapse');

    collapse.addEventListener('click', () => {
        block.classList.toggle('open');
    });

    document.addEventListener('mousedown', (e) => {
        if (block.contains(e.target)) {
            return;
        }
        block.classList.toggle('open', false);
    });

    body {
        overflow-y: scroll;
    }
    
    .block {
        max-height: 100px;
        overflow: hidden;
    }
    
    .block.open {
        max-height: 100%;
    }

    <div class="block">
        <button class="collapse">Click</button>
        <p class="text">
            Long content here...
        </p>
    </div>

外观如何

演示：Jsfiddle

首先，我想知道为什么会发生这种情况，然后如何解决呢？

更新：

我注意到，当页面包含具有position: fixed;属性的元素时，它们不会消失。同样，在调整窗口大小时，内容也会返回。

Answer 1

看来TThread外部的点击确实确实折叠了文本，这就是单击滚动条时发生的情况。您仍然可以通过单击来向下滚动，但是由于内容现在不够长而没有滚动条，因此它再次消失。

要防止监听滚动条上的点击，您可以尝试将事件监听器附加到.block上，而不是直接附加在body上：

document