1. /*
  2. 如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,
  3. 以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView()
  4. 作为标准方法。
  5. scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,
  6. 调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么
  7. 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素
  8. 会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部
  9. 不一定齐平,例如:
  10. //让元素可见
  11. document.forms[0].scrollIntoView();
  12. 当页面发生变化时,一般会用这个方法来吸引用户注意力。实际上,为某个元素设置焦点也
  13. 会导致浏览器滚动显示获得焦点的元素。
  14. 支持该方法的浏览器有 IE、Firefox、Safari和Opera。
  15. */
  16. document.querySelector("#roll1").onclick = function(){
  17. document.querySelector("#roll_top").scrollIntoView(false);
  18. }
  19. document.querySelector("#roll2").onclick = function(){
  20. document.querySelector("#roll_top").scrollIntoView(true);
  21. }

scrollIntoView() 调用元素就可以出现在视窗中的更多相关文章

  1. 一个N*M的矩阵,找出这个矩阵中所有元素的和不小于K的面积最小的子矩阵

    题目描述: 一个N*M的矩阵,找出这个矩阵中所有元素的和不小于K的面积最小的子矩阵(矩阵中元素个数为矩阵面积) 输入: 每个案例第一行三个正整数N,M<=100,表示矩阵大小,和一个整数K 接下 ...

  2. Vue父组件如何调用子组件(弹出框)中的方法的问题

    如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...

  3. 在由N个元素构成的集合S中,找出最小元素C,满足C=A-B,其中A,B是都集合S中的元素,没找到则返回-1

    package bianchengti; /* * 在由N个元素构成的集合S中,找出最小元素C,满足C=A-B, * 其中A,B是都集合S中的元素,没找到则返回-1 */ public class f ...

  4. Android反射出一个类中的其他类对象并调用其对应方法

    MainActivity如下: package cn.testreflect; import java.lang.reflect.Field; import java.lang.reflect.Met ...

  5. 调用opencv相关函数,从视频流中提取出图片序列&&&&jpg图片序列,转化成avi格式视频

    /************************ @HJ 2017/3/30 参考http://blog.sina.com.cn/s/blog_4b0020f301010qcz.html修改的代码 ...

  6. [PY3]——找出一个序列中出现次数最多的元素/collections.Counter 类的用法

    问题 怎样找出一个序列中出现次数最多的元素呢? 解决方案 collections.Counter 类就是专门为这类问题而设计的, 它甚至有一个有用的 most_common() 方法直接给了你答案 c ...

  7. 找出数字数组中最大的元素(使用Math.max函数)

    从汤姆大叔的博客里看到了6个基础题目:本篇是第1题 - 找出数字数组中最大的元素(使用Match.max函数) 从要求上来看,不能将数组sort.不能遍历.只能使用Math.max,所以只能从java ...

  8. LeetCode 5071. 找出所有行中最小公共元素(Java)

    题目:5071. 找出所有行中最小公共元素 给你一个矩阵 mat,其中每一行的元素都已经按 递增 顺序排好了.请你帮忙找出在所有这些行中 最小的公共元素. 如果矩阵中没有这样的公共元素,就请返回 -1 ...

  9. 用最小的空间复杂度找出一个长度为n的数组且数据中的元素是[0,n-1]中任一个重复的数据。

    用最小的空间复杂度找出一个长度为n的数组且数据中的元素是[0,n-1]中任一个重复的数据. 比如:[1, 2, 3, 3, 2, 2, 6, 7, 8, 9] 中 2 or 3 分析:这道题目,实现比 ...

随机推荐

  1. CDH 安装 kafka

    前言 其实cloudera已经做了这个事了,只是把kafka的包和cdh的parcel包分离了,只要我们把分离开的kafka的服务描述jar包和服务parcel包下载了,就可以实现完美集成了. 具体实 ...

  2. Mutex对象

    案例一 举一个例子,设计模式中的单例模式,记得当时做机房收费系统的时候就用的单例模式防止一个界面被实例多次,而Mutex对象能达到同样的效果,防止界面被实例化多次,起到控制线程的作用. 案例二 如果大 ...

  3. appium+夜神模拟器+python安卓app爬虫初体验

    环境搭建:Windows 7 64bit jdk包:jdk-8u171-windows-x64.exe(http://www.oracle.com/technetwork/java/javase/do ...

  4. Opencv-Python学习笔记(二)

    2. 使用OpenCV3处理图像 2.1 不同色彩空间的转换 OpenCV中有数百种关于在不同色彩空间之间转换的方法. 三种常用色彩空间:灰度.BGR.HSV(Hue色调,Saturation饱和度, ...

  5. python 从大到小排序

    a = [3,7,4,9]a = sorted(a,reverse=True)print(a)#[9, 7, 4, 3]

  6. centos7 安装部署gitlab

    Gitlab官网地址:https://about.gitlab.com/downloads/ Linux系统环境: Centos7 gitlab服务安装之前需要安装一些依赖包:yum install ...

  7. 玩转postman(一)-----基础

    postman的GUI界面以及各个组件介绍 主界面如下 打开postman的GUI界面以及各个元素组件介绍 分为下三部分: 1.Head navigation bar (头部导航栏):此部分有以下选项 ...

  8. Eclipse oxygen 版本汉化教程

    Eclipse oxygen 版本汉化步骤如下: 第一步:打开Eclipse 第二步:浏览器打开网址 http://www.eclipse.org/babel/downloads.php 1.复制对应 ...

  9. IDEA cannot resolve symbol “xxxx”

    有缓存 多试两次就可以了. 技术交流群:816227112

  10. python 聊天程序(基于UDP)

    from threading import Thread from socket import * updSocket = socket(AF_INET,SOCK_DGRAM) updSocket.b ...