鼠標滾輪上的JS scrollIntoView函數不起作用

Question

我有上面的腳本，該腳本在瀏覽器控制台上輸出正確的ID，但不滾動：

var divID = null;
var up = null;
var down = null;

function div(x) {
    switch(x.id) {
        case 's1':
            up = null;
            down = 's2';
            break;
        case 's2':
            up = 's1';
            down = 's3'
            break;
        case 's3':
            up = 's2';
            down ='s4';
            break;
        case 's4':
            up = 's3';
            down = null;
            break;
        default:
            up = null;
            down = null;
            break;
    }
}

window.addEventListener('wheel', function(e) {          
    if (e.deltaY < 0 && up) {
        console.log(up);
        document.getElementById(up).scrollIntoView();
    }
    if (e.deltaY > 0 && down) {
        console.log(down);
        document.getElementById(down).scrollIntoView();
    }
});

我正在使用這種結構：

<div id='s1' onmouseover="div(this)">
    <!--content-->
</div>
<div id='s2' onmouseover="div(this)">
    <!--content-->
</div>
<div id='s3' onmouseover="div(this)">
    <!--content-->
</div>
<div id='s4' onmouseover="div(this)">
    <!--content-->
</div>

就像我說的那樣，console.log會打印它應該顯示的內容，但是滾動什么也沒做，只是常規滾動。 如果有問題，我正在使用wordpress。

Answer 1

這里的問題是，在某些瀏覽器和操作系統中，滾動到一個元素不會激活該元素的懸停狀態。 另外，如果有人拖動滾動條，它將永遠不會激活您的懸停。

這里的懸停對象告訴滾動事件要去哪里，但是它們需要懸停操作才能有效。 您最好找到具有offsetTop值的正確元素，而不是在滾動過程中要求第二個事件。

[edit]否則滾動事件的滾動將覆蓋scrollIntoView方法的潛力。 由於似乎只想進行滾動移動，請嘗試將e.preventDefault()添加到滾動事件中。