vue设置scrollLeft 一直为0的原因

问题描述

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

vue设置scrollLeft 一直为0的原因相关推荐

nginx导致vue设置history模式下的请求丢失参数
nginx导致vue设置history模式下的请求丢失参数问题描述: 当访问下面的路径时参数会丢失: http://ip/vuecay/path1/path2?name=cay 演示效果: 可以看到 ...
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论
新闻热点国内国外,前端最新动态 Microsoft 宣发面向 iOS 与 Android 平台的 Microsoft Edge:为了保证 Windows 用户各平台使用体验的一致性,Microsof ...
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论... 1
前端每周清单第 34 期:Vue 现状盘点与 3.0 展望,React 代码迁移与优化,图片优化详论作者:王下邀月熊编辑:徐川前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解 ...
vue设置一个简单的计算器
vue设置一个简单的计算器 <div id="app"><input type="text" v-model="n1"&g ...
UGUI 锚点设置为四方扩充模式然后设置局部坐标为0将出现什么问题
UGUI 锚点设置为四方扩充模式然后设置局部坐标为0将出现什么问题 UGUI 锚点设置为四方扩充模式然后设置局部坐标为0将出现什么问题? 情形:按钮A挂在主画布上.四方扩充模式.A的中心和画面中心不重 ...
JavaScript中的ParseInt(08)和“09”返回0的原因分析及解决办法
今天在程序中出现一个bugger ,调试了好久,最后才发现,原来是这个问题. 做了一个实验: alert(parseInt("01")),当这个里面的值为01====>07时 ...
Vue设置浏览器小图标（ICON）
Vue设置浏览器小图标当我们使用浏览器做开发时,我们能希望浏览器标签页能显示自己的logo小图标,这个是怎样设置的呢? 第一步:准备logo图片信息找到自己的logo,通过图片在线转换格式,转换成 ...
vue设置scrollTop不起作用
今天遇到一个小问题vue设置滚动条高度一直为0.解决方法放在下边. 在这里一定要加上this.$nextTick()方法,否则document.querySelector(".article ...
vue设置组件高度100%
#方法1(成功) 设置单位为100vh. #方法2:我试了一下,没成功(可能要在App.vue设置). 给div设置高度100%时,div的高度会等同于其父元素的高度.而上面代码中id为app的div ...

vue设置scrollLeft 一直为0的原因

vue设置scrollLeft 一直为0的原因相关推荐

最新文章

热门文章