要实现PC端鼠标拖动<div>元素触发横向滚动条的滚动，同时滚动条不显示，可以使用CSS和JavaScript来实现。以下是一个简单的示例：
HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag to Scroll</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scroll-container">
<div class="scroll-content">
<!-- 这里放置你的内容 -->
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html> CSS (styles.css) body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.scroll-container {
width: 80%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
cursor: grab;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.scroll-container::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
.scroll-content {
display: inline-block;
}
.item {
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
background-color: #ccc;
text-align: center;
line-height: 200px;
} JavaScript (script.js) document.addEventListener('DOMContentLoaded', () => {
const scrollContainer = document.querySelector('.scroll-container');
let isDragging = false;
let startX;
let scrollLeft;
scrollContainer.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.pageX - scrollContainer.offsetLeft;
scrollLeft = scrollContainer.scrollLeft;
scrollContainer.style.cursor = 'grabbing';
});
scrollContainer.addEventListener('mouseleave', () => {
isDragging = false;
scrollContainer.style.cursor = 'grab';
});
scrollContainer.addEventListener('mouseup', () => {
isDragging = false;
scrollContainer.style.cursor = 'grab';
});
scrollContainer.addEventListener('mousemove', (e) => {
if (!isDragging) return;
e.preventDefault();
const x = e.pageX - scrollContainer.offsetLeft;
const walk = (x - startX) * 1.5; // 调整滚动速度
scrollContainer.scrollLeft = scrollLeft - walk;
});
}); 解释HTML: 创建一个包含滚动内容的容器。CSS: 隐藏滚动条：使用 -ms-overflow-style: none; 和 scrollbar-width: none; 隐藏IE、Edge和Firefox的滚动条，使用 ::-webkit-scrollbar 隐藏Chrome、Safari和Opera的滚动条。设置容器的鼠标样式为 grab 和 grabbing，以提供更好的用户体验。JavaScript:监听鼠标按下、移动和释放事件。在鼠标按下时，记录初始位置和滚动位置。在鼠标移动时，计算滚动距离并更新容器的 scrollLeft 属性。在鼠标释放或离开容器时，停止拖动。这样，你就可以实现一个可以通过鼠标拖动来滚动的容器，并且滚动条不会显示。
网友回复
我知道答案，我要回答
私活外包
最新提问
有没有不依赖embedding向量的RAG技术？
有没有支持实时打断语音通话并后台帮你执行任何的ai模型？
开源ai大模型文件格式GGUF、MLX、Safetensors、 ONNX 有什么区别？
出海挣钱支付收款PayPal、Wise 、PingPong、Stripe如何选择？
如何实现类似google的图片隐形水印添加和识别技术？
linux上如何运行任意windows程序？
ai能写出比黑客还厉害的零日漏洞等攻击工具攻击任意软件系统工程？
js如何获取浏览器的音频上下文指纹、Canvas指纹、WebGL渲染特征？
为啥ai开始抛弃markdown文本，重新偏好html文本了？
网站有没有办法鉴别访问请求是由ai操控chrome-devtools-mcp发出的？
