js 类似微信索引列表移动

最新推荐文章于 2023-04-21 17:06:13 发布

心郎

最新推荐文章于 2023-04-21 17:06:13 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/u011301203/article/details/53470435

版权

本文介绍如何使用JavaScript实现类似微信通讯录的滑动索引效果，通过创建浮动侧边栏并实时更新索引，提高用户在长列表中查找联系人的体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box>div{
				height: 40px;
				width: 100px;
				border: 1px solid red;
			}
			ul{
				position: fixed;
				top: 10px;
				right: 10px;
			}
			ul>li{
				height: 30px;
				width: 30px;
				border: 1px solid red;
				list-style: none;
			}
			.box>li{
				height: 20px;
				width: 100px;
				list-style: none;
				border: 1px solid black;
			}
		</style>
	</head>
	<body