js -> JS 原生滚动条动画效果

最新推荐文章于 2021-09-11 10:20:14 发布

mft8899

最新推荐文章于 2021-09-11 10:20:14 发布

阅读量477

点赞数

分类专栏： js + jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/mft8899/article/details/84896659

版权

js + jquery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

scroll_Left 和 scroll_Top

function scroll_Left(tar_x){ 
    var timer = setTimeout(function(){  
        var current_x = document.body.scrollLeft
  
        step = 40 
        if (tar_x>current_x){  
            var dist = Math.ceil((tar_x-current_x)/step)  
            var next_x = current_x+dist  
            if(next_x<tar_x){  
                window.scrollTo(next_x,0)     
                scroll_Left(tar_x)  
            }  
            else{  
                window.scrollTo(next_x,0)  
                //clearTimeout(timer)  
            }  
        }  
        else{ 
            var dist = Math.floor((tar_x-current_x)/step)  
            var next_x = current_x+dist  
            if(next_x>tar_x){  
                window.scrollTo(next_x,0)  
                scroll_Left(tar_x)   
            }  
            else{  
                window.scrollTo(next_x,0)  
                //clearInterval(timer)  
            }  
        }  
    },1)  

}
function scroll_Top(tar_y){ //tar_y 即滑动条顶端 距离页面最上面的距离  
    //console.log('oooooooo')  
    var timer = setTimeout(function(){  
        var current_y = document.body.scrollTop  
        //console.log(current_y)  
        step = 40 //步长系数 即剩余的距离除以40 每1ms 移动一段距离  
        if (tar_y>current_y){ //tar_y > current_y 即向下滚动  
            var dist = Math.ceil((tar_y-current_y)/step)  
            var next_y = current_y+dist  
            if(next_y<tar_y){  //向上滚动和向下滚动判定的区别 是这里！！  
                window.scrollTo(0,next_y)     
                scroll_Top(tar_y)  
                console.log('do down')  
            }  
            else{  
                window.scrollTo(0,tar_y)  
                //clearTimeout(timer)  
            }  
        }  
        else{ //tar_y < current_y 即向上滚动  
            var dist = Math.floor((tar_y-current_y)/step)  
            var next_y = current_y+dist  
            if(next_y>tar_y){  
                window.scrollTo(0,next_y)  
                scroll_Top(tar_y)  
                console.log('do up')  
            }  
            else{  
                window.scrollTo(0,tar_y)  
                //clearInterval(timer)  
            }  
        }  
    },1)  
}

**结合 zepto 做的手势左右滑动轮播

index.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=0"  />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name='apple-touch-fullscreen' content='yes'/>
	<meta name="full-screen" content="yes"/>
	<script src="./zepto.min.js"></script>
	<script src="./g.js?23"></script>
</head>
<body>

<script language="javascript">
<!--
	;(function($){
		var winWidth = $(window).width();
		 var startX = 0;
		 var startLeft = 0;
		 //alert(winWidth)
		 $(document).on("touchstart",function(obj){
			 startX = obj.changedTouches["0"].clientX;
 			 startLeft = document.body.scrollLeft;
			 if(startLeft < winWidth){
				 startLeft = 0;
			 }else{
				 startLeft = winWidth;
			 }
		 });
		 $(document).on("touchend",function(obj){
	 
		 
			if(((obj.changedTouches["0"].clientX) - startX) > 100  ){
				scroll_Left_prt(0);
			}else if(startX - ((obj.changedTouches["0"].clientX)) > 100  ){ 
				scroll_Left_prt(winWidth);
			}else{
				scroll_Left_prt(startLeft);
			}
			 
		
		 });
	})(Zepto);  
 

//-->
</script>
<style type="text/css">
	*{margin:0px;padding:0px}
	table{background:red;}
	table td{width:10%;text-align:center}
</style>
<table width="200%" height="100%" id="tb" cellspacing="0" cellpadding="0" border="0">
	<tr style="width:100%">
		<td id="f">1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
		<td>9</td>
		<td>10</td>		
	</tr>
</table>

	
	

</body>
</html>

g.js -- 解决连续两次操作时遇到的冲突。在外面包括了一个 function 和加了个全局变量判断状态

var scrolll_stop = false;
function scroll_Left_prt(tar_x){	
	if(scrolll_stop == true){return;}
	scrolll_stop = true;
	scroll_Left(tar_x);
}

function scroll_Left(tar_x){ 
    var timer = setTimeout(function(){  
        var current_x = document.body.scrollLeft
  
        step = 10;//值越小，滚动越快
        if (tar_x>current_x){  
            var dist = Math.ceil((tar_x-current_x)/step)  
            var next_x = current_x+dist  
            if(next_x<tar_x){  
                window.scrollTo(next_x,0)     
                scroll_Left(tar_x)   				
            }  
            else{  
				scrolll_stop = false;
                window.scrollTo(next_x,0)  
                //clearTimeout(timer)  
            }  
        }  
        else{ 
            var dist = Math.floor((tar_x-current_x)/step)  
            var next_x = current_x+dist  
            if(next_x>tar_x){  
                window.scrollTo(next_x,0)  
                scroll_Left(tar_x)       
            }  
            else{  
				scrolll_stop = false;
                window.scrollTo(next_x,0)  
                //clearInterval(timer)  
            }  
        }  
    },1)  

}

mft8899

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js -> JS 原生滚动条动画效果

scroll_Left 和 scroll_Top function scroll_Left(tar_x){ var timer = setTimeout(function(){ var current_x = document.body.scrollLeft step = 40 if (tar_x&g...
复制链接

扫一扫