Откройте HTML-код с общим кодом в Chrome и попробуйте прокрутить содержимое. Для прокрутки будет сгенерировано предупреждение.
После нажатия OK нажмите навести курсор мыши на элемент div, и проблем не будет.
Теперь откройте один и тот же код в Firefox.Scroll один раз, и появится предупреждение.Нажмите ОК.
Наведите указатель мыши на элемент div сейчас, и вы увидите, что событие прокрутки вызывается даже при наведении курсора, где мы устанавливаем переполнение: автоматически из переполнения: скрыто
Совместное использование кода ниже: -
<!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>