实现手机端类似vantUi tab栏横向滚动效果

添加剂shine

已于 2024-05-10 11:04:54 修改

阅读量376

点赞数 7

分类专栏： js基础文章标签： javascript html5

于 2024-05-09 17:50:26 首次发布

本文链接：https://blog.csdn.net/m0_52039188/article/details/138623918

版权

js基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
            li{
                list-style: none;
            }
			#supervisor .select ul {
				overflow-x: auto;
				white-space: nowrap;
				width: 100%;
				scrollbar-width: none;
				display: flex;
				position: relative;
				-webkit-overflow-scrolling: touch;
				box-sizing: content-box;
				height: 100%;
                padding: 0;
			}

			#supervisor .select ul li {
				cursor: pointer;
				position: relative;
				flex: none;
				margin-right: 0.15rem;
				border-radius: 2rem;
				border: 1px solid rgba(0, 0, 0, 0);
				padding: 0.08rem 0.16rem;
			}

			#supervisor .select ul li.isshow {
				border: 1px solid #e26656;
				color: #e26656;
			}
			#supervisor .select ul li:nth-of-type(1) {
				margin-right: 0.2rem;
			}
		</style>
	</head>
	<body>
		<div id="supervisor">
			<div class="select">
				<div class="box">
					<ul>
						<li class="isshow">全部数据</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>
						<li>数据12</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script>
		$(".select ul").on("click", "li", function () {
			$(this).siblings("li").removeClass("isshow");
			$(this).addClass("isshow");
			centerLi(this)
		});
		function centerLi(element) {
			const ulEl = $(element).parent()[0];
			const boxEl = $(element).parent().parent()[0];
			const liWidth = element.offsetWidth;
			const boxWidth = boxEl.offsetWidth;
			const totalScrollWidth = ulEl.scrollWidth - boxWidth;
			const liIndex = Array.from(ulEl.children).indexOf(element);
			let targetScrollLeft;
			if (liIndex === 0) {
				targetScrollLeft = 0;
			} else if (liIndex === ulEl.children.length - 1) {
				targetScrollLeft = totalScrollWidth;
			} else {
				const liLeft = element.offsetLeft;
				const liEdge = liLeft + liWidth;
				if (liEdge > boxWidth / 2) {
					const scrollOffset = liLeft - boxWidth/2 + liWidth/2;
					targetScrollLeft = scrollOffset < 0 ? 0 : scrollOffset;
				} else {
					targetScrollLeft = 0;
				}
			}

			ulEl.scrollTo({
				left: targetScrollLeft,
				behavior: "smooth"
			});
		}
	</script>
</html>