利用鼠标滚轮事件让页面横向滚动

一、首先要注意的是，此时页面排版不能是传统的竖向排版，应该人为地将排版改为横向，我这里的解决方案如下

我的所有页面元素的直接父元素不是body，在其中加了一层div，所以设置div的宽高为100%以便让其占满浏览器；white-space:nowrap是为了强制超出div父元素宽度的元素不换行显示，而是显示在右边，而事实上这样的元素已经超出浏览器宽度，看不到了，overflow:hidden的设置就是超出部分不可见，若设置成scroll则可以看到横向的默认滚动条(非常丑)。

html, body{
    width: 100%;
    height: 100%;
    font-size: 16px;
}

div{
    width: 100%;
    height: 100%;
    white-space:nowrap;
    overflow:hidden;
    font-size: 100%;
}

二、接下来就应该设置鼠标滚轮事件让页面能够横向滚动了，由于不同的浏览器所兼容的函数不同，所以需要首先判断浏览器类型，再按照不同浏览器写不同的函数；至于函数内部的逻辑都是一样的，都是通过滚轮事件的属性获得滚动的长度，用这个长度来映射应该滚动的距离，不同浏览器的属性名和属性所代表的值也不一样，这点需要注意；html元素有一个scrollLeft属性，代表元素滚动条距离元素左边多少像素，虽然此时我并没有让滚动条显示，但其还是客观存在的。这也就好理解了，我通过设置scrollLeft的值来让滚动条滚动，从而实现横向滚动页面的效果。这里要注意一点，如果给scrollLeft 设置的值小于0，那么scrollLeft 的值将变为0；如果给scrollLeft 设置的值大于元素溢出内容最大宽度，那么scrollLeft 的值将被设为元素溢出内容的最大宽度。也就是说这个属性自己会对所赋值执行容错操作，无需自己判断。代码如下所示，container指的就是我用来包裹页面元素的div元素，你也可以使用其他的元素。

        //判断浏览器
        let isIE = navigator.userAgent.match(/MSIE (\d)/i);
        isIE = isIE ? isIE[1] : undefined;
        let isFF = /FireFox/i.test(navigator.userAgent);

        if (isIE < 9) //传统浏览器使用MouseWheel事件
            container.attachEvent("onmousewheel", function (e) {
                //计算鼠标滚轮滚动的距离
                //一格3行，每行40像素
                let v = e.wheelDelta / 2;
                container.scrollLeft += v;
                //阻止浏览器默认方法
                return false;
            });
        else if (!isFF) //除火狐外的现代浏览器也使用MouseWheel事件
            container.addEventListener("mousewheel", function (e) {
                //计算鼠标滚轮滚动的距离
                let v = -e.wheelDelta / 2;
                container.scrollLeft += v;
                //阻止浏览器默认方法
                e.preventDefault();
            }, false);
        else //火狐使用DOMMouseScroll事件
            container.addEventListener("DOMMouseScroll", function (e) {
                //计算鼠标滚轮滚动的距离
                //一格是3行，但是要注意，这里和像素不同的是它是负值
                container.scrollLeft += e.detail * 80;
                //阻止浏览器默认方法
                e.preventDefault();
            }, false);