极客观点
项目管理
HarmonyOS
1.右边的内容滑到相应对应的区块 ,左边对应的区块相应对应的背景颜色, 就这么简单的需求!
大致效果我写出来了 但是还是有几个bug.
2.scrollTop 跳的位置不准确 差1-2 像素.
3.左边按钮点击会闪.
4.必须每个按钮先点击一遍, 右边的内容再去滑到相应对应的区块 ,左边对应的区块的背景颜色变色.
5.注意最上的那个白底不要看 不是那个问题;
6.代码
<!doctype html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta charset="UTF-8"/>
<title>Document</title>
<style>
.wrap{
width:375px;
height:500px;
margin:50px auto;
overflow:hidden;
}
.one{
float:left;
width:65px;
height:300px;
overflow:hidden;
}
ul,li{
margin:0;
padding:0;
}
ul{
overflow-y:scroll;
overflow-x:hidden;
width:80px;
height:300px;
}
.one li{
width:80px;
height:40px;
background:blue;
color:block;
}
.one li:first-child{
background:#fff;
}
.two{
overflow:hidden;
background:blue;
}
.item{
height:500px;
width:100%;
overflow-y:scroll;
}
.two-1{
height:500px;
background:red;
}
.two-2{
height:800px;
background:blue;
}
.two-3{
height:300px;
background:yellow;
}
.two-4{
height:800px;
background:orange;
}
.two-5{
height:500px;
background:green;
}
.two-6{
height:500px;
background:red;
}
.two-7{
height:500px;
background:green;
}
</style>
</head>
<body>
<div class="wrap" style="position:relative">
<div class="one">
<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>11</li>
</ul>
</div>
<div class="two">
<div class="item" style="position:absolute">
<div class="two-1">11</div>
<div class="two-2">22</div>
<div class="two-3">33</div>
<div class="two-4">44</div>
<div class="two-5">55</div>
<div class="two-6">66</div>
<div class="two-7">77</div>
</div>
</div>
</div>
</body>
<script src="jquery-2.0.0.min.js"></script>
<script>
//原生写法 原生scrollTop实现不是很好 每次都是从头开始
// var oDivs=document.querySelectorAll('.item>div');
// console.log(oDivs)
// var colors=['red','blue','yellow','orange','green','white'];
// var timer;
// var olis=document.querySelectorAll('li');
// var item=document.querySelector('.item');
// for(var i=0;i<olis.length;i++){
// olis[i].style.backgroundColor=colors[i];
// olis[i].index=i;
// olis[i].onclick=function(event){
// event=event||window.event;
// var li=event.target;
// var index=li.index;
// var oDivLi=oDivs[index];
// var liTarget=oDivLi.offsetTop;
// console.log(li+'------'+liTarget);
// clearInterval(timer)
// timer=setInterval(function(){
// liCurrent=liCurrent+(liTarget-liCurrent)/10
// item.scrollTop=liCurrent;
// console.log(item.scrollTop)
// if(item.scrollTop==liTarget){
// clearInterval(timer);
// }
// },20)
// var liCurrent=0;
// }
// }
//jquery写法 jquery框架优化了scrollTop 当前的位置坐运算
var oDivs=$('.item>div');
var olis=$('li');
var item=$('.item');
var liCurrent=0;
var timer;
for(var i=0;i<olis.length;i++){
olis[i].index=i;
olis[i].onclick=function(event){
event=event||window.event;
index = this.index;
oDivLi=oDivs[index];
liTarget=oDivLi.offsetTop+1;
liHeight=oDivLi.offsetHeight;
clearInterval(timer);
timer=setInterval(function(){
liCurrent = liCurrent +(liTarget-liCurrent)/10;
item.scrollTop(liCurrent);
if(Math.abs(liTarget-liCurrent)<1){
clearInterval(timer);
}
},20)
item.on('scroll',function(){
minY =item.scrollTop();
console.log(minY)
if((minY<liHeight+liTarget)&&(liTarget<=minY)){
olis[index].style.background="#fff";
console.log(minY)
}else{
olis[index].style.background="blue";
}
})
$('.one li').click(function(){
$(this).css('background','#fff').siblings().css('background','');
})
}
}
</script>
</html>
这颜色看着真蛋疼