点击上面或下面的按钮可以让这个列表滚动起来,点一下,滚一下 大概就这意思 给个思路
2条回答 默认 最新
- 崽崽的谷雨 2021-07-02 11:40关注
参考这个
<!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> * { margin: 0; padding: 0; } ul { width: 100px; height: 120px; overflow-y: auto; overflow-x: hidden; } ul li { list-style: none; width: 100%; height: 30px; border: 1px solid red; text-align: center; } </style> </head> <body> <button id="pret">上</button> <ul id="box"> <li> 222 </li> <li> 222 </li> <li> 222 </li> <li> 222 </li> <li> 222 </li> </ul> <button id="next">下</button> </body> <script> let pret = document.getElementById("pret"); let next = document.getElementById("next"); let box = document.getElementById("box"); next.addEventListener("click", () => { if(box.scrollTop>150){ //这里我是写死的,你可以获取ul下li的个数*每个高度 //大于这个就不让它加了 return } box.scrollTop = box.scrollTop + 30; }) pret.addEventListener("click", () => { if(box.scrollTop<=0){ //这里我是写死的,你可以获取ul下li的个数*每个高度 //大于这个就不让它加了 return } box.scrollTop = box.scrollTop -30; }) </script> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 虚幻5 UE美术毛发渲染
- ¥15 CVRP 图论 物流运输优化
- ¥15 Tableau online 嵌入ppt失败
- ¥100 支付宝网页转账系统不识别账号
- ¥15 基于单片机的靶位控制系统
- ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
- ¥15 下图接收小电路,谁知道原理
- ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
- ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
- ¥15 手机接入宽带网线,如何释放宽带全部速度