前端-css-js，屏幕滑动效果

tl110110tl

已于 2022-06-27 21:50:20 修改

阅读量2k

点赞数 1

分类专栏：前端文章标签： css javascript

于 2022-04-07 14:21:06 首次发布

本文链接：https://blog.csdn.net/tl110110tl/article/details/124014675

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一共有两个知识点

1.如何让一个盒子沾满一个屏幕，无论这个屏幕尺寸如何改变？

需要设置这个盒子的宽高均为100%,且这个盒子的直系爸爸们爷爷们也都要宽高100%，直到设置到html标签为止。

滑动效果，只是让scrollTo()方法在一个timeinteval中不断执行罢了。每次卷动一点即可

2.如何获取页面已经卷动的高度和宽度？

这个直接用写好的代码，就不要再自己写了

(1条消息) 前端-js中不需要记，但是要用的小知识_tl110110tl的博客-CSDN博客https://blog.csdn.net/tl110110tl/article/details/123896286滑动效果和【滚动高亮当先li的效果，有点视觉冲突，不太好解决，建议两个效果只保留一个】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		html , body{
			width: 100%;
			height: 100%;
		}
		ul,ol{
			list-style: none;
		}
		ul{
			width: 100%;
			height: 100%;
			position: absolute;
		}
		ul li{
			width: 100%;
			height: 100%;
			opacity:0.3;
		}
		ol{
			position: fixed;
			top : 10px;
			left:50px;
		}
		ol li {
			width: 50px;
			height: 50px;
			border: 1px solid #000;
			cursor: pointer;
			text-align: center;
			line-height: 50px;
			border-radius: 50%;
		}
		ol li.current{
			opacity:0.3;
			border: 5px solid purple;
		}
		.box{
			width: 100%;
			height: 100%;
			background-color: #fff;
		}
	</style>
	<script type="text/javascript">
	
	onload = function(){
		var bgColor= ["yellow","green","orange","red","blue","purple"];
		var ul = document.getElementById("ul");
		var ol = document.getElementById("ol");
		var ullis = ul.children;
		var ollis = ol.children;
		var target = 0,leader = 0,timer=null;//缓动动画用变量
		for (var i = 0; i < ullis.length; i++) {
			ullis[i].style.backgroundColor = bgColor[i];
			ollis[i].style.backgroundColor = bgColor[i];

			ollis[i].index = i;
			ollis[i].onclick = function(){
				// scrollTo(0,this.index * ullis[this.index].offsetHeight +ul.offsetTop );
				target = this.index * ullis[this.index].offsetHeight +ul.offsetTop;
				scrollyy();
				changeCurrent(this.index);
			}
		};

		
		onscroll = function(){
			for (var i = 0; i < ullis.length; i++) {
				if(scroll().top< ul.offsetTop+ i*ullis[0].offsetHeight + ullis[0].offsetHeight/2){
					changeCurrent(i);
					break;
				}
			};
		}

		function scrollyy(){
			clearInterval(timer);
			timer = setInterval(function(){
				var step = (target-leader)/10;
				step = step>0 ? Math.ceil(step):Math.floor(step);
				leader +=step;
				scrollTo(0, leader);
				if(step==0){
					clearInterval(timer);
					leader = target;
					alert("ok");
				}
			}, 30);
		}
		
		function changeCurrent(index){
			for (var i = 0; i < ollis.length; i++) {
				ollis[i].className = "";
			};
			ollis[index].className="current";
		}
		function scroll(){
			if(window.pageYOffset !=null){//【IE9+和其他浏览器】均声明DTD头
				return{
					left : window.pageXOffset,
					top : window.pageYOffset
				}
			}
			if(document.compatMode=="CSS1Compat"){// 声明了DTD头
				// 检测是不是怪异模式浏览器，--就是没有声明<!DOCTYPE html>
				return {
					left : document.documentElement.scrollLeft,
					top : document.documentElement.scrollTop
				}
			}
			if(document.compatMode=="BackCompat"){ // 未声明
				return {
					left : document.body.scrollLeft,
					top : document.body.scrollTop
				}
			}
			return {
				left :0,
				top :0
			}
		}


	}
	</script>
</head>
<body>
	<ul id="ul">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<ol id="ol">
		<li class='current'>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ol>
	<div class="box"></div>
</body>
</html>