vue设置scrollLeft 一直为0的原因
问题描述<div class="icontent" ref="icontent" ><div class="box" ref="cbox" ><img /></div></div>img 是position: absolute;绝对定位icontent,cbox是 position: rela...
·
问题描述
<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 最右边
更多推荐
已为社区贡献1条内容
所有评论(0)