简单实现一个单屏滚动效果

单屏滚动效果这里指的是滑动鼠标滚落，每次只滚动一个整屏，这种效果多用于一些展示性的网站首页以及一些活动页，这里就用使用jQuery实现这种效果。

页面结构以及一些简单样式如下：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .section {
        width: 100%;
        height: 1080px;
        line-height: 1080px;
        text-align: center;
    }
    .section h3 {
        font-size: 36px;
        color: #fff;
    }
    .first-section {
        background-color: rgb(27, 188, 155);
    }
    .second-section {
        background-color: rgb(75, 191, 195);
    }
    .third-section {
        background-color: rgb(123, 170, 190);
    }
    .fourth-section {
        background-color: rgb(250, 157, 17);
    }
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
</style>	  
<div id="dowebok">
    <div class="section first-section active">
        <h3>第一屏</h3>
    </div>
    <div class="section second-section">
        <h3>第二屏</h3>
    </div>
    <div class="section third-section">
        <h3>第三屏</h3>
    </div>
    <div class="section fourth-section">
        <h3>第四屏</h3>
    </div>
</div>

接下来就是js部分

1.添加一个鼠标滚轮滚动事件

document.addEventListener("mousewheel", this.mouseWheelHandler, false); // IE9, Chrome, Safari, Oper
document.addEventListener("wheel", this.mouseWheelHandler, false); // Firefox

2.鼠标滚动的时候页面也会滑动，所以给window对象添加一个监听页面滚动的滚动事件

$(window).on('scroll', this.scrollHandler);

3.页面滚动时比较每一个区块与滑动距离的差值，找出第一个在此滑动距离外的区块，拿到它的索引，然后将页面滑动相应距离，这里要注意因为是在滑动距离外，所以还要剪去一个区块的高度

// 页面滚动事件处理函数
scrollHandler: function (e) {
    var currentScroll = $(window).scrollTop();
    var visibleSectionIndex = 0; // 区块索引
    var initial = Math.abs(currentScroll - $('.section').first().offset().top); // 窗口滑动距离
    $('.section').each(function (index) {
        var current = Math.abs(currentScroll - $(this).offset().top);
        if (current < initial) {
            visibleSectionIndex = index;
            initial = current;
        }
    });
    _this.currentSection = $('.section').eq(visibleSectionIndex);
}

4.此外还要注意的是鼠标有向上滚动与向下滚动的区别

// 兼容性写法，通过判断鼠标的滚动值的正负可以判断是向上还是向下滚动，若delta为正，则为向上滚动，反之向下
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.deltaY || -e.detail))); 

完整js代码

var simpleFullPage = {
    init: function () {
        this.bind();
        this.currentSection = $('.section')[0];
    },
    bind: function () {
        _this = this;
        document.addEventListener("mousewheel", this.mouseWheelHandler, false); // IE9, Chrome, Safari, Oper
        document.addEventListener("wheel", this.mouseWheelHandler, false); // Firefox
        $(window).on('scroll', this.scrollHandler);
    },
    scrollHandler: function (e) {
        var currentScroll = $(window).scrollTop();
        var visibleSectionIndex = 0;
        var initial = Math.abs(currentScroll - $('.section').first().offset().top); // 窗口滑动距离
        $('.section').each(function (index) {
            var current = Math.abs(currentScroll - $(this).offset().top);
            if (current < initial) {
                visibleSectionIndex = index;
                initial = current;
            }
        });
        _this.currentSection = $('.section').eq(visibleSectionIndex);
    },
    mouseWheelHandler: function (e) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false; // 阻止默认事件
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.deltaY || -e.detail))); // 判断页面滚动方向
        clearTimeout(_this.timer);
        _this.timer = setTimeout(function () {
            _this.scrollPage(_this.currentSection, delta);
        }, 300);
    },
    scrollPage: function (element, delta) {
        delta < 0 ? _this.scrollPageDown(element) : _this.scrollPageUp(element);
    },
    scrollPageUp: function (element) {
        if ($(element).prev().hasClass('section')) {
            $('html, body').animate({
                scrollTop: $(element).position().top - 1080
            }, 500);
        }
    },
    scrollPageDown: function (element) {
        if ($(element).next().hasClass('section')) {
            $('html, body').animate({
                scrollTop: $(element).position().top + 1080
            }, 500);
        }
    }
}

simpleFullPage.init();