js实现动态拖动滚动条效果

最新推荐文章于 2025-06-17 14:58:29 发布

你好棒棒哦

最新推荐文章于 2025-06-17 14:58:29 发布

阅读量9.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 滚动条 js拖拽滚动条 js动画 jq animate

本文链接：https://blog.csdn.net/qiangqin3990/article/details/77671519

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用JavaScript来创建动态拖动滚动条的效果，包括无动态效果的基础实现和有动态效果的进阶技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.无动态效果

触发事件时，滚动条立马滚动到相应位置。

<!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8" />
 	<title>拖动滚动条</title>
 </head>
<body>
  <!-- d1是外层div，带滚动条 -->
  <div id='d1' style='height:200px;width:100px;overflow:scroll;background:blue;'>
     <div style='height:500px;width:500px;background:yellow'>2222</div>
  </div>
 </body>
<script>
   document.getElementById('d1').scrollTop=100;//通过scrollTop设置滚动到100位置
   document.getElementById('d1').scrollLeft=200;//通过scrollLeft设置滚动到200位置
</script>
 </html>

二.有动态效果

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <script src="引入的jquery地址"></script>
</head>
<body>
<!-- d1是外层div，带滚动条 -->
       <div id='d1' style='height:200px;width:100px;overflow:scroll;background:blue;'>
             <div style='height:500px;width:500px;background:yellow'>2222</div>
       </div>
</body>
<script>
       $('#d1').animate({scrollTop:"100",scrollLeft:'200'},2000,'swing',function(){alert(1);});
</script>
</html>

简单记录一下，这里#d1是滚动条归属，如果是浏览器的滚动条则用'body'，animate是jq的动画效果的方法，参数一是样式，参数二是动画持续时间，参数三是easing函数，参数四是动画执行完了回调函数，只有参数一必填。