首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue组件设计-滚动置顶

在前端开发中,滚动置顶是一个比较常见的交互设计,特别是在一些大型网站的首页,当内容篇幅较多时,在页面的底部或是侧边都会放置一个滚动置顶的图标,方便用户快速回到顶部。 1. 滚动交互注意事项 1....置顶图标在什么时候显示,什么时候消失; 2. 滚动的过程要做缓冲动画处理,即滚动要速度要递减,才不能显的那么的突兀; 2. 组件设计考虑因素 1. 组件要可以传参控制滚动置顶的位置; 2....组件要可以传参控制滚动置顶图标在什么时候显示和消失; 3. 组件的滚动置顶图标最好支持传参自定义的样式; 4. 组件的滚动置顶图标在显示和消失时最好支持传参自定义的动画; 3....基于Vue的滚动置顶设计实例 <div v-show="visible...visibilityHeight: { type: Number, default: 400, }, // <em>滚动</em><em>置顶</em>位置

61910
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue中页面跳转滚动置顶(总结)

    1.vue单个页面跳转时: 在此页面上mounted方法中设置滚动条的方法 1 2 3 4 mounted() {            // 切换页面时滚动条自动滚动到顶部        window.scrollTo...(0,0);      } 2.全部页面,使用路由的钩子函数中设置(在router中main.js) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19...document.documentElement.scrollTop = 0     // safari     window.pageYOffset = 0     next() }) 3.全部页面,使用路由vue-router自带的滚动条行为解决...(router中的index.js文件中) 1 2 3 4 5 6 7 8 //页面跳转显示在顶部   scrollBehavior (to, from, savedPosition) {     ...      return savedPosition     } else {       return { x: 0, y: 0 }     }   } 4.layout布局时全部页面跳转滚动置顶

    2.5K20

    JS简易整页滚动

    fullPage超简易版本 1.知识点 JS 滚动监听事件 JS 移动端touch监听事件 函数节流 DOM操作 2.示例GIF ?...CSS html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果, 并设置为相对定位, 滚动是修改外部容器的...Top 值, 实现滚动效果. html, body { padding: 0; margin: 0; overflow: hidden; } .page-container { position...向下滚动时, 当 currentPosition 比 -整体分页高度 大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动. /...滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动. var handlerWheel = throttle(scrollMove

    15.6K31

    JS判断滚动条是否停止滚动

    背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动滚动时,需要向后台发请求,计算数据,再拿到前台展示。        ...分析:由于数据量级别较大,所以当滚动滚动时,如果时时向后台发请求,对服务器和浏览器都造成巨大的压力。想到的解决方案是,当滚动条停止时,再去发请求计算数据。...那么问题来了,如何判断滚动条是否停止了呢?        解决:搜索了一下,js本身是无法判断滚动条是在滚动状态还是停止状态,只有通过其它方式了。...后来想到的思路是当滚动滚动的时候,发起一个定期执行的方法,并记录一次当前滚动条到顶部的距离,这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等,如果相等,那么说明停止滚动了,不相等,还在滚动。...-- // 让浏览器出现滚动条 for(var i = 0; i < 100; i++) { document.write(""); } var topValue = 0,//

    17.4K00
    领券