设置滚动条的默认位置

一、设置某个容器滚动条的默认位置

可以在页面加载的时候(mounted),content展示最后面的部分;

也可以监听数据变化,实时更改位置

二、设置页面的滚动位置

window.scrollTo(x, y)

将Y设置的足够大就直接滚到页面底部了:

window.scroll(0, 5000)

三、js 获取元素相对于页面(可视窗口)的位置,不考虑页面滚动后

浏览器可视窗口:
浏览器窗口显示网页的部分(即不包括地址栏、工具栏)就是可视区

function getElementPos(el) {
  if(el.parentNode === null || el.style.display == 'none') {
    return false
  }
  var parent = null
  var pos = []
  var box
  if(el.getBoundingClientReac) {
    box = el.getBoundingClientReac()
    var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop)
    var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft)
    return {x: box.left + scrollLeft, y: box.top + scrollTop}
  } else {
    pos = [el.offsetLeft, el.offsetTop]
    parent = el.offsetParent
    if(parent != el) {
      while (parent) {
        pos[0] += parent.offsetLeft
        pos[1] += parent.offsetTop
        parent = parent.offsetParent
      }
    }
  }
  return {x: pos[0], y: pos[1]}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值