scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类型的情况。

调用方法为 element.scrollIntoView() 参数默认为true。

参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐;

参数为false时,使element的底部与视图(容器)底部对齐。

TIPS:页面(容器)可滚动时才有用!

1、document.getElementById("view").scrollIntoView();

2、document.getElementById("view").scrollIntoView(false);

scrollIntoView可以说是URL中hash标记的进化,那么它在什么时候用到呢?想想hash(也就是#xxx)的作用吧!

如下应用

---------------------
作者:何处青山
来源:CSDN
原文:https://blog.csdn.net/hyl94/article/details/77472154
版权声明:本文为博主原创文章,转载请附上博文链接!

scrollIntoView()的用法的更多相关文章

  1. js中scrollIntoView()的用法

    一. 什么是scrollIntoView scrollIntoView是一个与页面(容器)滚动相关的API 二. 如何调用 element.scrollIntoView() 参数默认为true 参数为 ...

  2. 那些移动端web踩过的坑2

    原文链接:https://geniuspeng.github.io/2018/04/26/mobile-issues2/ 坑是无穷无尽的,嗯-长江后坑推前坑~~ 关于音频自动播放 H5的audio标签 ...

  3. 2016年第2周读书笔记与工作笔记 scrollIntoView()与datalist元素

    这一周主要是看了html5网页开发实例与javascript 高级程序设计,供以后翻阅查找.  html5网页开发实例第1章与第二章的2.1部分: 第1章内容: html5在w3c的发展史. 浏览器的 ...

  4. Iframe 用法的详细讲解

    1转自:https://blog.csdn.net/judyge/article/details/51786064 zIframe 用法的详细讲解 把iframe解释成“浏览器中的浏览器“很是恰当 & ...

  5. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  6. jquery插件的用法之cookie 插件

    一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  7. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  8. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  9. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

随机推荐

  1. PHP 类文件的自动加载机制 __autoload()

    如果一个类在多个脚本中都需要使用,可以将一个类的定义代码,单独的封装到一个文件中,这种文件也叫作类文件,在需要的时候,将整个文件载入进来即可! PHP在执行的时候,如果发现需要一个类(只要是和这个类相 ...

  2. CSS 水平居中和垂直居中

    1.水平居中——行内元素 text-align: center; 2.水平居中——定宽块状元素 margin: auto,满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto” ...

  3. LOJ2522:[FJOI2018]邮递员问题(乱搞)

    传送门 乱搞. 可以发现如果起点在左边界,终点在右边界的时候上下走的点一定是连续的(可能吧) 那么可以设 \(f_{i,j,0/1}\) 表示当前上面到 \(i\),下面到 \(j\),当前在上面/下 ...

  4. SpringMVC注解集合

    @RequestMapper注解 绑定请求路径与处理方法例如: @RequestMapping("login.do") public String showLogin() { .. ...

  5. Ckeditor失去焦点前保留光标位置

    var $selection = CKEDITOR.instances.myEditor.getSelection();//当前选中区域 var $bookmarks = $selection.cre ...

  6. Available to Promise (ATP) in SAP-SD

    One short note before we start off the subject: Availability refers to the projections of future mat ...

  7. 8 张脑图入门 JavaScript - 基础面试不倒

    8 张脑图入门 JavaScript - 基础面试不倒 转载请注明出处 第一:JavaScript 的变量 第二:JavaScript 运算符 第三:JavaScript 数组 第四:JavaScri ...

  8. mongodb3.X权限配置

    环境: CentOS6.8  mongodb3.4.1 1.连接mongodb数据库(如果mongo命令没有做环境变量配置,需要定位到有mongo命令的目录) [root@VM_118_34_cent ...

  9. 解释JS变量作用域的范例

    JS的变量作用域只有两种:全局作用域与函数作用域. 用var声明的变量不能简单的说是属于函数作用域,应该是说属于其最近的作用域. var a = 10; function test(){ var a; ...

  10. 理解 Azure 平台中虚拟机的计算能力

    虚拟化平台至今已经发展了十多年的时间.其中 Hyper-V 技术现在也已经是第三代版本.用户对于虚拟化计算也越来越接受,这也有了公有云发展的基础.然而在很多时候,用户在使用基于 Hyper-V 的 A ...