一、首先要注意的是，此时页面排版不能是传统的竖向排版，应该人为地将排版改为横向，我这里的解决方案如下
我的所有页面元素的直接父元素不是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);
如果觉得《利用鼠标滚轮事件让页面横向滚动》对你有帮助，请点赞、收藏，并留下你的观点哦！
