首页使用原生html写一个自动滚动的列表鼠标移入可以自己上下滑动

使用原生html写一个自动滚动的列表鼠标移入可以自己上下滑动

时间: 2024-10-16 22:10:20 浏览: 21

为了创建一个自动滚动的HTML列表，并允许鼠标悬停时用户自行上下滑动，你可以使用`<ul>`标签作为列表容器，然后结合JavaScript或者CSS动画来实现这个功能。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> .scroll-list { overflow-y: scroll; height: 200px; /* 设置固定高度，可根据需要调整 */ -webkit-scrollbar-thumb: none; /* 隐藏默认滚动条 */ scrollbar-width: none; /* Firefox */ touch-action: pan-y; /* 允许垂直滚动 */ } .scroll-list::-webkit-scrollbar { /* Webkit 内核（如 Chrome 和 Safari）下添加滚动条样式 */ display: none; } .scroll-list:hover { touch-action: auto; /* 当鼠标悬停时，恢复触控滚动 */ } .list-item { padding: 10px; background-color: lightgray; list-style-type: none; } </style> </head> <body> <ul class="scroll-list"> <li class="list-item">列表项1</li>  <li class="list-item">列表项2</li>  </ul> <script> const list = document.querySelector('.scroll-list'); list.addEventListener('mouseenter', function() { this.style.touchAction = 'auto'; }); list.addEventListener('mouseleave', function() { this.style.touchAction = 'pan-y'; }); </script> </body> </html> ``` 在这个例子中，当鼠标离开列表时，滚动会变为只能通过手动滑动；当鼠标进入列表时，触屏设备也可以响应上下滑动。

阅读全文