Question

我有一个页面，四个主要的div一个接一个地垂直堆叠。我需要滚动它应该在div之间直接移动而不是正常滚动。

我正在使用ScrollTo插件功能，但它无法正常工作，因为我必须在滚动上执行所有操作，但在插件示例中它使用的是按钮。

任何人都知道我怎么能这样做？

我想要一个与此页面类似的行为。

enter

http://jsfiddle.net/jLG7W/

Answer 1

您链接到的网站似乎是使用fullPage.js jQuery插件。这就是我猜你会追求的。

编辑：

要在没有任何插件的情况下工作，可以尝试这样的事情

var divs = ["first","second","third","fourth"];
var counter = 0;

document.addEventListener("mousewheel", function(e) {

    if(e.wheelDelta > 0){ // up 
        if(counter > 0){
            counter--;
            document.getElementById(divs[counter+1]).style.display = "none";
            document.getElementById(divs[counter]).style.display = "block";
        } 
    }
    else if(e.wheelDelta < 0){ // down

        if(counter < (divs.length-1)){        
            counter++;
            document.getElementById(divs[counter-1]).style.display = "none";
            document.getElementById(divs[counter]).style.display = "block";
        } 
    }

});

演示：http://jsfiddle.net/jLG7W/1/

Answer 2

如果您在实际滚动鼠标滚轮时需要触发滚动功能，不仅使用键盘箭头，那么您应该尝试阅读this.

我做了简单的演示here in JSFiddle。

if (window.addEventListener) {
    // IE9, Chrome, Safari, Opera
    window.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox
    window.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else window.attachEvent("onmousewheel", MouseWheelHandler);


function MouseWheelHandler(e) {

    // cross-browser wheel delta
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    // Replace this IF statement with your code
    if(delta==-1){
        // Go to next slide
    }else{
        // Go to previous slide
    }


    return false;
}

如何在滚动时滚动到页面上的特定div？

2 个答案: