Comments (6)
from finger-mover.
如果有必要我可以把那个网页展示给你看下
from finger-mover.
@zaxlct
scrollTo(target, ms) 方法在进行滚动的时候,如果 target 属性是元素或者元素选择器的话,底层使用如下代码进行位置计算:
export function getRelativeRect (parent, child) {
let pos = {
top: 0,
left: 0
}
while (child !== parent) {
pos.top += child.offsetTop
pos.left += child.offsetLeft
child = child.offsetParent
}
return pos
}
其中 getRelativeRect 方法的接受两个参数,el 就是可滚动元素,就是你再初始化 finger-mover 实例时传入的el选项,child 是 el 的子节点,在这里例子中就是你那里的“美妆”按钮,通过上面代码可以看出,是循环增加 child.offsetLeft/Top 来计算的。你出现的问题或许与布局有关,你可以尝试给可滚动元素添加相对定位试试。
我这边也会排查一下这个问题。
另外一个应急的解决办法是:你手动计算一下距离,然后把距离传递给 scrollTo 方法。
from finger-mover.
@HcySunYang 这是简化版的代码,供参考,然后我尝试直接传距离给 scrollTo 方法。
<div class="navbar_container">
<div id="scroll_box" :style="{width: shop_type_list.length * 64 + 'px'}">
<div @click="调用fm[0].scrollTo" v-for="(type, key) in shop_type_list">
{{type}}
</div>
</div>
</div>
const shop_type_list = [
'今日推荐','女装','男装','鞋子','箱包',
'美妆','护肤','生活','居家', '美食', '内衣',
'运动','数码','母婴','配饰', '成人', '宠物',
]
this.fm = new Fmover({
el: '#scroll_box',
plugins: [
simulationScrollX({
scrollBar: false,
}),
]
})
.navbar_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#scroll_box {
height: 40px;
}
.nav_item {
display: inline-block;
width: 64px;
}
from finger-mover.
@zaxlct 你给 #scroll_box 元素添加相对定位,应该就可以解决问题
#scroll_box {
position: relative;
}
另外,源码也已经修改。随着下一个版本发布,这个时候就不需要手动给 DOM 元素加定位了。
from finger-mover.
@HcySunYang OK,目前场景直接传距离给 scrollTo 方法也挺方便的
from finger-mover.
Related Issues (20)
- 不支持安卓4.4机器啊 HOT 7
- 水平滚动bug HOT 1
- 水平滚动到边缘时,currentX和元素的实际translateX不一致 HOT 2
- 垂直滚动设置bounce为false时页面闪烁或卡顿
- 严重“BUG“!! HOT 1
- 横向滚动的时候,动态设置width后不能滚动 HOT 3
- fmover-slide-x 初始化问题 HOT 1
- ios滚动时会误触点击事件 HOT 3
- fmover-slide-x 初始化问题 在npm最新版本中存在此问题 HOT 1
- 在 finger mover中无法设置div滚动条
- 在fmoverSlideX水平滚动太过灵敏,建议增加防误触功能
- 手指移到滚动区域外层的固定元素,回弹会失效 HOT 1
- 插件沒有提供銷毀的方法嗎,衹是怕會有問題 HOT 2
- onTransMoveEnd事件失效 HOT 2
- 1
- 希望支持pc端拖动
- 希望滚动支持这些功能可以吗?
- 请问Vue中实现轮播,切换组件后,报错如何解决
- 初始化报错:This is an invalid selector HOT 2
- loadMore触底加载是否可以提供像pullDown,相同的api
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from finger-mover.