使用scroller()对页面无缝滚动

页面滚动效果

• 具体实现过程

  1. body里添加一个div盒子，再在里面放置四个一样的div盒子（添加css样式）
     附下图：
     

  2. 去除页面滚动条 overflow-y:hidden
     

  3. 布局采用body父级absolute，div相对定位relative;

  4. html页面搭建成功后，此时页面无法滚动，页面只显示 all-one 页面

  5. 使用 mousewheel滚动插件

     // mousewhell滚动插件，可以在网上下载源包
     <script src="js/mousewhell.js" type="text/javascript" charset="utf-8"></script>
     

  6. 核心方法

     		var index = 0; // 定义index变量赋值
     		$wrap = $(".all")
     		
     		function scroller(){
     			var cliHeight; // 定义cliHeight变量
     			var height = document.body.offsetHeight; // 获取当前页面区域宽高
     			cliHeight = height * index; // 当前页面宽高*index  （页面当前宽高*1 是第一页all-one的宽高，以此类推）
     			// jquery 对DOM上的元素进行操作
     			$wrap.attr("css", "all")
     			.css("-webkit-transform", "translateY(-" + cliHeight + "px)")
     			.css("transition", " 600ms")
     		}
     		// 声明up方法 执行一次index自增一次
     		function up(){
     			index++;
     			// 当滚到最后一页的时候 ，不会再向下滚动
     			if(index == $(".all>div").length){
     				index = $(".all>div").length-1;
     			}
     		}
     		// 同理 down方法 执行一次自减一次
     		function down(){
     			index--;
     			// index<0 ; 回到第一页
     			if(index < 0 ){
     				index = 0
     			}
     		}
     		```
     

     7.执行滚动事件

      $wrap.one('mousewheel',mouse_);
     	function mouse_(event){
     			// event滚动事件，鼠标Y轴滚动 属性在向下滚动时返回正值，向上滚动时返回负值，否则为0。
     			if(event.deltaY < 0){
     				// 鼠标向上滚动
     				up()
     			}else{
     				// 鼠标向下滚动
     				down()
     			}
     			// 每滚动一次执行 scroller()方法
     			scroller();
     			// 定时器
     			setTimeout(function(){
     				$wrap.one('mousewheel',mouse_)
     			},200)
     		}
     		})