vue设置scrollLeft 一直为0的原因

a393007511

于 2019-11-12 13:28:28 发布

阅读量5.1k

点赞数 1

分类专栏： Vue 文章标签： vue scrollLeft

本文链接：https://blog.csdn.net/a393007511/article/details/103026943

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

问题描述

<div class="icontent" ref="icontent" >
    <div class="box" ref="cbox" >
      <img />
    </div>
</div>

img 是position: absolute;绝对定位
icontent，cbox是 position: relative
多个img横向平铺撑开cbox出现滚动条
鼠标拖动滚动条可以显示隐藏部分内容

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

找到出现滚动条的容器

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

//scrollLeft=0 最左边；scrollWidth-clientWidth 最右边