问题
Open the html with shared code in Chrome and try to scroll on the content.An alert will be generated for scroll.
After Pressing OK click hover on the div and there will be no issue.
Now open the same code in Firefox.Scroll once and there will be alert shown. Press on ok.
Hover over the div now and you will see scroll event getting called even on hover where we are setting overflow:auto from overflow:hidden
Sharing the code below:-
<!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>来源：https://stackoverflow.com/questions/53608738/overflowauto-from-overflowhidden-in-firefox-is-triggering-a-scroll-event