4

我正在为我的投资组合创建一个 OnePage。

每个站点都填充了 100% 的屏幕。我希望当我使用鼠标滚轮滚动时，一个 Scroll 向下滚动 100%，这样我就可以直接进入下一个站点，而不是页面之间的某个位置。

有人能告诉我如何用 JS/jQuery 解决这个问题吗？

4

2 回答 2

5

您还可以使用以下 onscroll 处理程序，它基于此答案：

$(document).ready(function () {
    var divs = $('.mydiv');
    var dir = 'up'; // wheel scroll direction
    var div = 0; // current div
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});

这是jsfiddle及其分离的测试页面。

于 2013-06-24T13:41:16.940 回答
1

MouseWheel 不是 jQuery 中的默认事件，所以首先你需要这样的东西，要么编写你自己的函数来切换到下一页，要么使用另一个插件，如scrollTo

虽然不太确定这是否是最佳做法..

编辑

这是Stano小提琴基础上的小提琴。

$("body").mousewheel(function(event, delta, deltaX, deltaY) {
    event.preventDefault();
    if (delta > 0 && current_page > 0) {
        current_page = current_page - 1;
        $("body").scrollTo( '#page_'+current_page);  
    } else if (delta < 0 && current_page < 10) {
        current_page = current_page + 1;
        $("body").scrollTo( '#page_'+current_page);
    }
});

另一个编辑：小提琴只能在 FF 中使用，因为 Chrome 和 IE 由于错误的 MIME 类型而拒绝加载脚本。

于 2013-06-24T10:59:31.810 回答