最近有一个项目需求,需要在界面顶部竖排显示菜单栏,菜单栏底部显示内容,点击菜单栏中的选项,让底部显示的相应内容置于内容显示区的顶部,而不是页面的顶部,这样做的好处是可以不遮盖菜单栏,方便用户操作。
说一下实现思路:
总体思路:采用js原生的Scroll实现。
因为是在vue中实现,引入jquey显得很笨重,所以直接用原生写,代码也是非常简单。
第一步,计算父元素div到顶部的高度
第二步,计算不同子元素到达顶部的高度,可以通过一个方法传入子元素id值
第三步,给父元素的滚动条距离顶部的位置值赋值,形成动态滚动效果
说明一下:父元素需要设置overflow-y:scroll,设置界面最外层div的overflow-y:hidden,否则外层也会跟着一起滑动,就不能起到只滑动固定div的效果了。
代码实现如下:
method:{
ScrollMethod(childid){
var partotop = document.getElementById('parentid').offsetTop; //父元素到页面顶部距离
var distance = document.getElementById(childid).offsetTop; //子元素到页面顶部的距离
console.log("子元素距离顶部的距离是---"+distance);
var scrolldis = document.getElementById('parentid').scrollTop=distance - partotop;
console.log('父容器可滚动距离---'+scrolldis);
}
}
亲自动手实践一下吧,亲测效果非常好,完美的解决了我的问题,也不用担心兼容性的问题。