TIPS:容器可滚动时才有用!

语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true)

element.scrollIntoView(alignToTop); //布尔参数

element.scrollIntoView(scrollIntoViewOptions); //对象参数

语法参数

alignToTop [可选],目前之前这个参数得到了良好的支持
true 元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是默认值
false 元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}。
scrollIntoViewOptions [可选],目前这个参数浏览器对它的支持并不好,可以查看下文兼容性详情
behavior [可选]定义过渡动画。"auto","instant"或"smooth"。默认为"auto"。
block [可选] "start","center","end"或"nearest"。默认为"center"。
inline [可选] "start","center","end"或"nearest"。默认为"nearest"。

示例

var element = document.getElementById("box");

element.scrollIntoView();

element.scrollIntoView(false);

element.scrollIntoView({block: "end"});

element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

scrollIntoView()方法将元素滚动到浏览器窗口的可见区域的更多相关文章

  1. scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...

  2. h5之scrollIntoView控制页面元素滚动

    如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...

  3. selenium中元素操作之浏览器窗口滚动&网页日期控件操作(js操作)(五)

    js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...

  4. scrollIntoView将指定元素定位到浏览器顶部,底部,中间

    var element = document.getElementById("box"); element.scrollIntoView();//顶部 element.scroll ...

  5. JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

    alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...

  6. jquery 获取浏览器窗口的可视区域高度 宽度 滚动条高

    原文:http://www.open-open.com/code/view/1421827925437 alert($(window).height()); //可视区域高度 alert($(docu ...

  7. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

  8. 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

    1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...

  9. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  10. selenium_webdriver(python)获取元素属性值,浏览器窗口控制、网页前进后退,title/url打印

    <span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-s ...

随机推荐

  1. JSP第九次作业

    1.建库,建表2个用户表(id,用户名,密码)邮件表(id,发件人,收件人,标题,内容,发送时间,状态) 2.建model层entity,dao包 3.登陆,注册,登陆后显示全部邮件 dao 1 pa ...

  2. 和ChatGPT聊了一会天它的学习反映能力惊呆了我

    我:用java写一段玫瑰花 ChatGPT:您可以使用 Java 绘制玫瑰花.以下是一段代码: import java.awt.*; import javax.swing.*; public clas ...

  3. C++练习2 强制类型转换

    const可以把有关的数据定义为常量. const类型可以修饰:对象,指针,引用 使用const_cast为强制类型转换,将常量强制转换非常量. 1 #include <iostream> ...

  4. Centos7下areaDetector IOC的编译

    准备: Centos7ministall的系统: root权限下: yum install -y epel-release yum install -y git wget gcc gcc-c++ au ...

  5. JZOJ 4299. 【NOIP2015模拟11.2晚】舳舻牌

    题目 思路 倒序 \(DP\) 设 \(f_{i,j}\) 表示 \(A\) 先手,当前 \(A\) 报出的值为 \(i\),\(B\) 报出的值为 \(j\),\(A\) 取诱惑值大于等于 \(i\ ...

  6. 下载、编译AspNetCore 的全过程

    1. clone 源码 下载新的 git clone --recursive https://github.com/dotnet/aspnetcore 如果之前clone过,但是没有使用 --recu ...

  7. video多视频轮播Swiper 播放视频不轮播不循环

    在实际工作中经常会遇到swiper轮播多个视频,播放视频不轮播不循环 loop:true下问题: (1)slides前后会复制若干个slide,成一个环路,不会复制绑定在dom上@click事件, 解 ...

  8. PG统计信息和系统表

    一.PG统计信息概述 pg的统计信息主要分为两种: 第一类统计信息是是负载指标"统计信息"(Monitoring stats),通过stat collector进程进行实时采集更新 ...

  9. js控制关闭layui的switch开关

    <input class="switch" type="checkbox" lay-skin="switch" lay-filter= ...

  10. centos7配置vue环境

    1.安装nodejs #下载源码 wget https://npm.taobao.org/mirrors/node/v14.15.4/node-v14.15.4-linux-x64.tar.xz #解 ...