zoukankan      html  css  js  c++  java
  • 滚动到指定元素位置

    let ele = document.getElementById('box') // 有滚动条的元素
    let eleNav = document.getElementById('commentNav') // 需要滚动到的元素
    // 判断元素是否出现了滚动条
     if (ele.scrollHeight > ele.clientHeight) {
    // 设置滚动条到最底部
    // ele.scrollTop = ele.scrollHeight 滚动到底部
    ele.scrollTop = eleNav.offsetTop - 20 // 滚动到指定元素,如果高度够是置顶情况,-20是我设置了padding
     }

    scrollTop:获取或设置一个元素的内容垂直滚动的像素数,当一个元素的内容没有产生垂直

    方向的滚动条,那么它的 scrollTop 值为0
    scrollHeight:这是一个只读属性,是元素内容高度的度量,包括由于溢出导致的视图中不可

    见的内容。注意:scrollHeight在没有滚动条的情况下,它的值跟下面要介绍的clientHeight

    相同。scrollHeight包括元素的padding,但不包括元素的border和margin
    clientHeight:也是一个只读属性,返回元素内部的高度,包括padding,但不包括border跟

    margin

    offsetTop:元素到文档顶部的距离
    清楚这几个属性之后我们就可以知道要怎么完成以上思路了

    注:首先给你设置了滚动属性的元素设置一个标识,比如设置一个id,vue的话,如果是

    进入页面就滚动到底部,建议放到updated生命周期里执行,此时页面已经渲染完毕,

    可以准确获取,当然也可以放到点击事件里,看需要,万变的情况

  • 相关阅读:
    python enhanced generator - coroutine
    python yield generator 详解
    gunicorn syncworker 源码解析
    gunicorn 信号处理(SIGHUP,SIGUSR2)
    gunicorn Arbiter 源码解析
    gunicorn 简介
    kafka+zookeeper环境配置(linux环境单机版)
    在Linux中安装JDK的步骤
    Kafka安装及部署
    Zookeeper 安装和配置
  • 原文地址:https://www.cnblogs.com/supermanYU/p/14467758.html
Copyright © 2011-2022 走看看