问题描述

<div class="icontent" ref="icontent" >
    <div class="box" ref="cbox" >
      <img />
    </div>
</div>
  1. img 是position: absolute;绝对定位
  2. icontent,cbox是 position: relative
  3. 多个img横向平铺撑开cbox出现滚动条
  4. 鼠标拖动滚动条可以显示隐藏部分内容

新需求鼠标滚轮滚动控制滚动条,控制显示的内容; 想当然获取cbox 设置scrollleft;但是一直为0;
原因是出现滚动条的不是cbox 而是他的上层容器;
所以scrollLeft不能正确设置值可能就是没有找到出现滚动条的容器
解决步骤:

  1. 找到出现滚动条的容器
window.addEventListener('scroll', this.windowScroll, true);
windowScroll(){   
   console.log( document.querySelector(".box").parentElement.parentElement.parentElement.scrollLeft)    // 查看打印的值是否有变化 如果有 则说明滚滚动条在这个标签中
},

//scrollLeft=0 最左边;scrollWidth-clientWidth 最右边
Logo

前往低代码交流专区

更多推荐