在滚动时,Chrome不会阻止鼠标滚轮事件

时间:2020-10-22 16:27:55

标签: javascript google-chrome mousewheel

有人知道如何解决此问题吗?

已设置超时以防止 2秒后发生鼠标滚轮事件,但是您可以尝试连续上下滚动,直到停止滚动才可以阻止它。

此错误仅在Chrome,Firefox和Edge正常工作时出现。

const preventDefault = (e) =>{
    e.preventDefault()
}

const setEvent = () => {
    setTimeout(() => {
        window.addEventListener("mousewheel", preventDefault, { passive: false });
        window.addEventListener("DOMMouseScroll", preventDefault, { passive: false });
        console.log('Stopped!')
        document.querySelector('div').style.display = 'block'
    }, 2000)
}

setEvent()

document.querySelector('button').addEventListener('click', () =>{
    document.querySelector('div').style.display = 'none'
    window.removeEventListener("mousewheel", preventDefault, { passive: false });
    window.removeEventListener("DOMMouseScroll", preventDefault, { passive: false });
    setEvent()
})
section{
    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

.as-console-row:not(:last-of-type){
    display: none
}

.content{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    text-align: center;
}

h1{
    font-family: 'Arial';
    font-size: 24px;
    margin: 0 0 20px;
    color: #fff
}
<section style="height: 1000vh"></section>
<div class="content" style="display: none">
    <h1>Scroll prevented after 2 seconds but you can still scroll until you stop scrolling</h1>
    <button>Try again</button>
</div>

0 个答案:

没有答案