• JS的scrollIntoView简单使用


      scrollIntoView方法滚动当前元素,进入浏览器的可见区域

    el.scrollIntoView(); // 等同于el.scrollIntoView(true)
    el.scrollIntoView(false);

      该方法可以接受一个布尔值作为参数。

      如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);

      如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。

      如果没有提供该参数,默认为true。

      锚点定位是一个再熟悉不过的操作了,通常会用a标签href=#XX去实现,不过这样做,有一个问题,就是页面会有刷新感,而且地址栏会有变化,F5刷新,则#XXX还是显示在地址栏里,这样如果要进一步进行有关地址栏url的操作,就不得不再做些判断,所以寻找一些新的方法。如果要求不是很高,scrollIntoView()这个方法就可以取代传统锚点定位,它是利用滚动原理,来将相应的元素滚动到可是区域内。接下来看看详细的介绍。

      首先需要说明的是,这个方法并没有写入标准,但是大多数主流浏览器已经支持或部分支持其功能了,所以可以放心使用,当然如果有朝一日标准出来了,那就按标准来吧。其次要说明的是,这是js原生方法,jquery等框架是使用不了的,所以,获得元素的方法一定是document.getElementById或querySelector,然后才可以点出来scrollIntoView()方法。

    官方参数

      参数介绍:直接上官方看api介绍比较清晰(https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

    使用介绍

      页面一定要能滚动,这个方法才会生效,否则,你让我如何给你滚动呢?

    //这个title-part元素将以平滑的滚动方式滚动到与视口底部齐平地方(有兼容性问题)
    document.querySelector("#title-part").scrollIntoView({
        block: 'end',
        behavior: 'smooth' 
    })
     
    //这个article-part元素将以平滑的滚动方式滚动到与视口顶部齐平地方(有兼容性问题)
    document.querySelector("#article-part").scrollIntoView({
        block: 'start',
        behavior: 'smooth'
    })
     
    //这个articleMU-part元素将木讷的瞬间滚动到与视口顶部齐平地方(无滚动动画效果)
    document.querySelector("#articleMU-part").scrollIntoView();//默认值就是true,可以不写
     
    //这个titleMU-part元素将木讷的瞬间滚动到与视口底部齐平地方(无滚动动画效果)
    document.querySelector("#titleMU-part").scrollIntoView(false)
  • 相关阅读:
    linux-who
    Linux开机禁用开启防火墙
    linux环境vnc安装
    NFS配置及开机自动挂载
    yum list失败
    镜像文件挂载及本地yum搭建
    weblogic在64位windows的设置
    linux操作系统语言更改
    Linux磁盘空间扩容(LVM)
    Nginx 拒接服务漏洞(CVE-2016-0747)整改
  • 原文地址:https://www.cnblogs.com/goloving/p/10215603.html
Copyright © 2020-2023  润新知