javascript - 使用按钮而不是滚动条滚动 css、html、javascript

Question

我不想制作可滚动的水平导航栏。但是，我希望当光标悬停在指向导航栏滚动方向的按钮上时，导航栏中的元素能够滚动。有关如何执行此操作的任何信息都将非常有帮助。谢谢。

Answer 1

你可以做something like this ，它使用 javascript 来防止任何类型的滚动，除非向上或向下箭头悬停在上方。

var down = document.getElementById('down'),
    up = document.getElementById('up'),
    body = document.body;

var timeout;
down.onmouseover = function (e) {
    timeout = setInterval(function () {        
        window.scrollBy(0, 7);
    }, 20)
};
down.onmouseout = function (e) {
    if (timeout) {
        clearInterval(timeout);
    }
};

up.onmouseover = function (e) {
    timeout = setInterval(function () {     
        window.scrollBy(0, -7);
    }, 20)
};
up.onmouseout = function (e) {
    if (timeout) {
        clearInterval(timeout);
    }
};


// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36, backspace: 8
var keys = [37, 38, 39, 40, 32, 34, 33, 35, 36, 8];

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
  preventDefault(e);
}

感谢 galambalazs 的回答 in this SO question这帮助我禁用页面滚动