代码如下所示:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,ul{
padding:0px;
margin:0px;
}
li{
list-style:none;
}
#body{
width:400px;
height:200px;
border:10px solid black;
border-radius:10px;
margin:30px auto;
position:relative;
}
#content {
width: 100%;
height: 100%;
border-radius: 10px;
border: 5px solid black;
transform: translate(-5px,-5px);
overflow:auto;
}
#content::-webkit-scrollbar{
padding-left:100px;
}
ul{
padding-left:10px;
}
li{
line-height:24px;
}
.camera {
height: 100px;
width: 16px;
background-color: black;
position: absolute;
top: 45px;
left: 0px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
}
</style>
</head>
<body>
<div id="body">
<div id="content">
<ul>
<li>测试数据1</li>
<li>测试数据2</li>
<li>测试数据3</li>
<li>测试数据4</li>
<li>测试数据5</li>
<li>测试数据6</li>
<li>测试数据7</li>
<li>测试数据8</li>
<li>测试数据9</li>
<li>测试数据10</li>
<li>测试数据1</li>
<li>测试数据2</li>
<li>测试数据3</li>
<li>测试数据4</li>
<li>测试数据5</li>
<li>测试数据6</li>
<li>测试数据7</li>
<li>测试数据8</li>
<li>测试数据9</li>
<li>测试数据10</li>
<li>测试数据1</li>
<li>测试数据2</li>
</ul>
</div>
<div class="camera"></div>
</div>
<script>
(function ma(){
var thresh=18, //定义纵向间距
liOffset=20; //定义横向偏移量
var aLi=document.getElementsByTagName("li"); //获取所有下拉列表项
var camera=document.querySelector(".camera"); //获取边框左边的黑色镜头区
var cameraRect=camera.getBoundingClientRect(); //获取镜头的位置信息
var content=document.getElementById("content"); //获取内容显示区域
content.οnscrοll=ma; //内容滚动时,触发时间,可以arguments.calle
for(var item of aLi){
var itemRect=item.getBoundingClientRect();
var tfb=cameraRect.top-itemRect.bottom;
var bfb=cameraRect.bottom-itemRect.bottom;
if(Math.abs(tfb)<=thresh){
item.style.transform="translateX("+getLengh(0,liOffset,getTime(thresh,tfb))+"px)";
//console.log("进入");
}else if((tfb<0)&&(bfb>thresh)){
item.style.transform="translateX("+liOffset+"px)";
}else if(Math.abs(bfb)<=thresh){
item.style.transform="translateX("+getLengh(liOffset,0,getTime(thresh,bfb))+"px)";
}else{
item.style.transform="translateX(0px)";
}
}
})();
/*以下为纯函数
*getLength:根据百分比获取横向偏移量获取
*getTime:根据纵向获取百分比
*/
function getLengh(p0,p1,t){
return p0+(p1-p0)*t;
}
function getTime(p0,p1){ //20 -->-20
return (p0-p1)/(p0*2);
}
</script>
</body>
</html>
显示效果:
知识点:
1,HTML5的API接口getBoundingClientRect(),可以在JS中获取页面元素的位置信息,包括top、right、bottom、left、width、height等元素位置、属性信息。
console.log(document.getElementById("demo").getBoundingClientRect());
2,前端优化,遵循高内聚,低耦合的准则
将业务代码归在一起,算法代码(纯函数)单独建立
纯函数概念:
1、代码内容仅仅只用到了传入的参数;
2、没有影响到任何外面的参数;
3、不对页面业务产生任何干扰。(执行纯函数后,页面渲染不发生改变)
纯函数是业务逻辑分离出來的逻辑,最好加上注释,便于理解和复用
/**
*@param 差值算法
*@p0:初始状态
*@p1:结束状态
*@t:变化函数
*/
3,arguments.callee调用函数自身
在函数中,使用arguments.callee()可以调用函数本身,相当于面向对象中的递归。但是ES5以后已经不建议使用了,建议使用函数名调用函数自身。
4,在web开发中,当元素内容超出元素盒模型时,我们通常会使用滚动条来显示元素的所有内容,但是浏览器自带的滚动条太丑了,在谷歌浏览器中,我们可以使用伪元素 ::-webkit-scrollbar{} 来自定义滚动条的样式;也可以在滚动条中设置内边距 padding-left:100px; 来隐藏滚动条。