js水平自定义滚动，实现拖动效果

最新推荐文章于 2024-04-24 13:35:29 发布

VIP文章 api13

最新推荐文章于 2024-04-24 13:35:29 发布

阅读量651

点赞数 1

文章标签： python pandas 数据分析

本文链接：https://blog.csdn.net/weixin_58688577/article/details/126604295

版权

【html】

<div class="page" style="width:1200px;overflow:hidden">
  <ul class="width:1600px;height: 166px; position: absolute;width: 100%;left: 0;"></ul>
  <p class="scrollbar">
    <span style="width: 896.638px; transform: translateX(303px);"></span>
  </p>
</div>

【jq】

var sbarbox = $(".page .scrollbar");
var sbar = sbarbox.find("span");
var sbox = $(".page")//容器
var sul = sbox.find("ul");//内容
var sbarw = parseFloat(sbox.width() / sul.width()) * sbox.width();//滚动条宽度 =(容器宽度/内容宽度)*容器宽度
sbar.width(sbarw);
var ismove = false;
//滚动条 按下可以滑动
sbarbox.mousedown(function (event) {
  ismove = true;
  var donwX = event.clientX;//鼠标初始位置
  var tranX = sbar.css("transform").replace(/[^0-9\-,]/g, '').split('