Question

在Chrome中使用共享代码打开html，然后尝试滚动内容。将为滚动生成警报。

按“确定”后，在div上单击鼠标悬停，将没有问题。

现在在Firefox中打开相同的代码。滚动一次，将显示警报。按确定。

现在将鼠标悬停在div上，即使在我们将overflow：auto从overflow：hidden设置为hover的悬停上，您也会看到滚动事件被调用

共享以下代码：-

<!DOCTYPE html>
    <html>`enter code here`
    <head>`enter code here`
    <style>
    div {
        background: yellow;
        border: 1px solid black;
        padding: 10px;
    }
    
    #myDIV {
        border: 1px solid black;
        width: 200px;
        height: 100px;
        overflow: hidden;
    }
    
    #myDIV:hover {
    	overflow-x: hidden;
        overflow-y: auto;
    }
    </style>
    </head>
    <body>
    
    <div id="myDIV">
    In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
    <br><br>
    'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
    </div>
    
    <script>
    
    document.getElementById("myDIV").addEventListener("scroll", myFunction1);
    
    function myFunction1() {
        console.log("Scroll is called");
    }
    
    
    </script>
    
    </body>
    </html>

溢出：自动溢出：隐藏在Firefox中触发了滚动事件

0 个答案: