• 当前标签:滚动

程序开发 Vue 滚动到底部

Vue实现滚动到底部: watch: {    // 监听数据的变化    message_list() {      this.$nextTick(() => {      let div = document.getElementById('scroll') // 获取滚动DOM的元素      div.scrollTop = div.scrollHeight  // 滚动到滚动高度位置,就是滚动到底部      })    }  }, 其他滚动到底部: 小程序滚动到底部 JS原生滚动到指定元素位置

2018-06-25 12:05:02 245 0 0
阅读详情

程序开发 JS原生滚动到指定元素位置

使用JS原生API Element.scrollIntoView() ;(有部分浏览器不支持) https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIntoViewOptions); // Object型参数 参数 alignToTop 一个Boolean值: 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。 如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。 scrollIntoViewOptions 一个boolean或一个带有选项的object: { behavior: "auto" | "instant" | "smooth", block: "start" | "end", } 如果是一个boolean, true 相当于{block: "start"},false 相当于{block: "end"}

2018-06-12 16:38:31 355 2 0
阅读详情

程序开发 小程序滚动到底部

小程序在实时聊天界面每发送一条自动滚动到网页底部; 实现代码: // 获取im的id节点然后屏幕焦点调转到这个节点   bottom: function () {     var query = wx.createSelectorQuery()     query.select('.im').boundingClientRect()     query.selectViewport().scrollOffset()     query.exec(function (res) {       wx.pageScrollTo({         scrollTop: res[0].bottom  // #the-id节点的下边界坐标       })       res[1].scrollTop // 显示区域的竖直滚动位置     })   }, 上面的代码有点bug,找了个新的: // 获取answer节点然后屏幕焦点调转到这个节点   bottom: function () {     wx.createSelectorQuery().select('.answer').boundingClientRect(function (rect) {       // 使页面滚动到底部       wx.pageScrollTo({         scrollTop: rect.height       })     }).exec()   }, 然后在需要执行滚动的地方加上: this.bottom();

2018-02-26 11:52:53 368 2 0
阅读详情
  • 1
前往