vue设置scrollLeft 一直为0的原因

问题描述

<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 最右边

• 点赞
• 收藏
• 分享
• 文章举报