点击上面或下面的按钮可以让这个列表滚动起来,点一下,滚一下 大概就这意思 给个思路
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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥20 怎么用dlib库的算法识别小麦病虫害
- ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
- ¥15 java写代码遇到问题,求帮助
- ¥15 uniapp uview http 如何实现统一的请求异常信息提示?
- ¥15 有了解d3和topogram.js库的吗?有偿请教
- ¥100 任意维数的K均值聚类
- ¥15 stamps做sbas-insar,时序沉降图怎么画
- ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看
- ¥15 关于#Java#的问题,如何解决?
- ¥15 加热介质是液体,换热器壳侧导热系数和总的导热系数怎么算