点击右边字母右边滑动到对应城市，滚动左边城市右边字母自动选中
直接上效果
城市对应字母的 json 整理
html 实现代码
<!DOCTYPE html>
<html lang="en">
<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>点击右边字母右边滑动到对应城市</title>
<style>
body,div,h1,h2,ul,li,header {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
html,body,.container {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
}
header {
line-height: 60px;
box-shadow: 1px 1px 10px #ddd;
padding: 0 30px;
color: #666;
}
.content {
padding: 20px 50px;
flex: 1;
display: flex;
overflow: hidden;
}
.city-box {
flex: 1;
overflow: hidden;
display: flex;
justify-content: space-between;
border: 1px solid #efefef;
padding: 20px 30px;
font-size: 14px;
}
.city-list-hid {
flex: 1;
display: flex;
overflow: hidden;
}
.city-list {
flex: 1;
min-height: 100px;
overflow-y: scroll;
padding-right: 30px;
margin-right: -17px; /* 关键 */
}
.city-header {
line-height: 30px;
font-size: 18px;
margin-bottom: 10px;
}
.city-body {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.item-name {
border: 1px solid #eee;
border-radius: 15px;
text-align: center;
line-height: 26px;
min-width: 68px;
padding: 0 10px;
color: #666;
margin: 0 10px 10px 0;
cursor: pointer;
transition: 300ms;
}
.item-name:hover {
background: green;
color: #fff;
}
.city-list-menu {
font-size: 12px;
line-height: 16px;
color: #999;
align-self: center;
text-align: center;
}
.city-list-menu-li {
transition: 300ms;
cursor: pointer;
}
.city-list-menu-li:hover, .city-list-menu-li.active {
font-size: 16px;
color: green;
}
</style>
</head>
<body>
<div class="container">
<header><strong>城市对应字母功能：</strong>点击右边字母右边滑动到对应城市，滚动左边城市右边字母自动选中</header>
<div class="content">
<div class="city-box" id="cityBox">
<div class="city-list-hid">
<div class="city-list" id="cityList">
</div>
</div>
<div class="city-list-menu">
<ul id="cityListMenuUl">
</ul>
</div>
</div>
</div>
</div>
<!-- 为了快速构造结构 这里引入jquery， 其实核心代码可以不用 jquery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
/* 定义一些变量 */
// 城市数据数组
var cityGroup = [];
var cityBoxOffsetTop = 0;
// 每个字母距离顶部的距离
var offsetTops = [];
// 字母标题的高度
var threshold = 30;
// 获取城市对应字母
$.getJSON('./city-first-char.json', function(res) {
cityGroup = res.cityGroup;
initCityHtml();
});
// 初始化结构
function initCityHtml() {
var cityList = '';
var cityListMenuUl = '';
cityGroup.map(function(e, i){
cityListMenuUl += `<li class="city-list-menu-li ${i===0?'active':''}" onclick="positionIndex('${e.firstChar}', this)" data-id="${e.firstChar}">${e.firstChar}</li>`;
var cityListBody = '';
e.cityList.map(function(city){
cityListBody += `
<div class="item-name">${city.name}</div>
`
});
cityList += `
<div class="item">
<div class="city-header" id="city-${e.firstChar}">${e.firstChar}</div>
<div class="city-body border-btm">
${cityListBody}
</div>
</div>
`;
});
$('#cityList').html(cityList);
$('#cityListMenuUl').html(cityListMenuUl);
// 关键
getTopData();
}
// 获取距离顶部高度 关键函数 纯 js 实现
function getTopData() {
cityBoxOffsetTop = document.getElementById('cityBox').offsetTop;
console.log(cityBoxOffsetTop);
cityGroup.forEach((item, index) => {
let offsetTop = document.getElementById('city-' + item.firstChar).offsetTop;
offsetTops.push(offsetTop-cityBoxOffsetTop);
});
}
// 点击字母滑动到对应城市 关键函数 纯 js 实现
function positionIndex(index, that) {
document.querySelectorAll('.city-list-menu-li').forEach(function(e){e.classList.remove('active')});
that.classList.add('active');
let offsetTop = document.querySelector('#city-' + index).offsetTop;
document.getElementById('cityList').scrollTop = offsetTop-cityBoxOffsetTop-threshold;
}
// 滚动条滚动 关键函数 纯 js 实现
document.getElementById('cityList').addEventListener('scroll', function(event){
document.querySelectorAll('.city-list-menu-li').forEach(function(e){e.classList.remove('active')});
if(event.target.scrollTop > threshold) {
offsetTops.every((item, index) => {
if(event.target.scrollTop <= item) {
document.querySelector(`.city-list-menu-li[data-id=${cityGroup[index].firstChar}]`).classList.add('active');
return false;
}
return true;
});
}else {
document.querySelector(`.city-list-menu-li[data-id=A]`).classList.add('active');
}
})
</script>
</body>
</html>
发表评论：