最近遇到一个js的商城首页，用js写一个无滚动条的导航栏，可以拖动查看各个导航项。
1.创建一个可拖动滚动的导航栏，并通过 JavaScript 动态添加数据。
先看 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>Document</title>
<style>
.navBar {
border: 1px solid red;
width: 1200px;
margin-left: 25px;
margin-top: 40px;
margin-bottom: 40px;
overflow-x: auto;
white-space: nowrap;
}
/* 去掉底部滚动条 */
.navBar::-webkit-scrollbar {
display: none;
}
li {
display: inline-table;
height: 50px;
margin: 10px;
border-radius: 10px;
background: #eeeeee;
font-family: "PingFangSC-Regular";
font-size: 30px;
color: #333333;
text-align: center;
width: 300px;
}
</style>
</head>
<body>
<ul class="navBar" id="tab"></ul>
</body>
</html>
.navBar 类定义了导航栏的样式，设置了宽度、边距、溢出隐藏以及滚动条样式等，让其在水平方向可滚动且样式美观。
- 元素作为导航栏容器，初始为空，等待 JavaScript 动态填充。
接下来是 JavaScript 核心代码，用于实现拖动滚动以及动态添加数据：
function enableDragScroll(tab) {
let flag = false;
let downX = 0;
let scrollLeft = 0;
tab.addEventListener("mousedown", function (event) {
flag = true;
downX = event.clientX;
scrollLeft = this.scrollLeft;
});
tab.addEventListener("mousemove", function (event) {
if (flag) {
var moveX = event.clientX;
var scrollX = moveX - downX;
this.scrollLeft = scrollLeft - scrollX;
console.log(scrollX);
}
});
tab.addEventListener("mouseup", function () {
flag = false;
});
tab.addEventListener("mouseleave", function (event) {
flag = false;
});
}
document.addEventListener("DOMContentLoaded", function () {
const tab = document.querySelector(".navBar");
if (tab) {
// 动态添加数据
const items = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9", "item10"];
items.forEach((item) => {
const li = document.createElement("li");
li.textContent = item;
tab.appendChild(li);
});
enableDragScroll(tab);
} else {
console.error("Tab element not found");
}
});
