<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="bScroll.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body style="font-size: 16px;">
<div class="wrap">
<header>
<h3>将从全国为您挑选可购买的车辆</h3>
</header>
<main>
<div class="dl">
<div class="box">
</div>
</div>
<div class="dr">
</div>
</main>
</div>
</body>
<script src="js1.js"></script>
<script>
var dr=document.querySelector('.dr')
var dl=document.querySelector('.dl')
var box=document.querySelector('.box')
var sol2=new BScroll('.dl',{
click:true,
probeType:3
})
ajax('city.json',function(date){
for (var i in date) {
dr.innerHTML+=`<p>${i}</p>`
box.innerHTML+=`
<p class='ps'>${i}</p>
<div class="ds">
${
date[i].map((value, index) => {
return `<span>${value.name}</span>`
}).join('')
}
</div>
`
sol2.refresh()
}
var ps=document.querySelectorAll('.ps')
var pss=document.querySelectorAll('.dr p')
dr.onclick = function(e) {
var t=e.target
var fn=dr.querySelector('.on')
fn&&fn.classList.remove('on')
t.classList.add('on')
if(t.nodeName=='P'){
var index=[...dr.childNodes].indexOf(t)
console.log(index);
sol2.scrollToElement(ps[index-1],1000)
}
}
sol2.on('scroll',(e) =>{
ps.forEach((value, index) => {
if(value.offsetTop<=-e.y){
document.querySelector('.on') &&document.querySelector('.on').classList.remove('on')
pss[index].classList.add('on')
}
})
})
})
</script>
</html>
//css样式
*{
margin: 0;
padding: 0;
}
html,body,.wrap{
width: 100%;
height: 100%;
}
.wrap{
header{
width: 100%;
height: 0.5rem;
background-color: #87c886;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
main{
.box{
width: 100%;
}
width: 100%;
height:calc(100% - 0.5rem);
display: flex;
.dl{
height: 100%;
background-color: pink;
width: 90%;
overflow: hidden;
}
.dr{
width: 10%;
height: 100%;
p{
text-align: center;
height: 4%;
border: 1px #ccc solid;
}
.on{
background-color: red;
}
}
.ps{
height: .3rem;
line-height: .3rem;
padding: 0 .1rem ;
background-color: #ccc;
}
.ds{
background-color: #fff;
span{
display: inline-block;
width: 25%;
text-align: center;
line-height: .1rem;
}
}
.box{
width: 100%;
background-color: #fff;
}
}
}
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
