scrollIntoView() 调用元素就可以出现在视窗中
- /*
- 如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,
- 以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView()
- 作为标准方法。
- scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,
- 调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么
- 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素
- 会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部
- 不一定齐平,例如:
- //让元素可见
- document.forms[0].scrollIntoView();
- 当页面发生变化时,一般会用这个方法来吸引用户注意力。实际上,为某个元素设置焦点也
- 会导致浏览器滚动显示获得焦点的元素。
- 支持该方法的浏览器有 IE、Firefox、Safari和Opera。
- */
- document.querySelector("#roll1").onclick = function(){
- document.querySelector("#roll_top").scrollIntoView(false);
- }
- document.querySelector("#roll2").onclick = function(){
- document.querySelector("#roll_top").scrollIntoView(true);
- }
scrollIntoView() 调用元素就可以出现在视窗中的更多相关文章
- 一个N*M的矩阵,找出这个矩阵中所有元素的和不小于K的面积最小的子矩阵
题目描述: 一个N*M的矩阵,找出这个矩阵中所有元素的和不小于K的面积最小的子矩阵(矩阵中元素个数为矩阵面积) 输入: 每个案例第一行三个正整数N,M<=100,表示矩阵大小,和一个整数K 接下 ...
- Vue父组件如何调用子组件(弹出框)中的方法的问题
如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...
- 在由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 ...
- Android反射出一个类中的其他类对象并调用其对应方法
MainActivity如下: package cn.testreflect; import java.lang.reflect.Field; import java.lang.reflect.Met ...
- 调用opencv相关函数,从视频流中提取出图片序列&&&&jpg图片序列,转化成avi格式视频
/************************ @HJ 2017/3/30 参考http://blog.sina.com.cn/s/blog_4b0020f301010qcz.html修改的代码 ...
- [PY3]——找出一个序列中出现次数最多的元素/collections.Counter 类的用法
问题 怎样找出一个序列中出现次数最多的元素呢? 解决方案 collections.Counter 类就是专门为这类问题而设计的, 它甚至有一个有用的 most_common() 方法直接给了你答案 c ...
- 找出数字数组中最大的元素(使用Math.max函数)
从汤姆大叔的博客里看到了6个基础题目:本篇是第1题 - 找出数字数组中最大的元素(使用Match.max函数) 从要求上来看,不能将数组sort.不能遍历.只能使用Math.max,所以只能从java ...
- LeetCode 5071. 找出所有行中最小公共元素(Java)
题目:5071. 找出所有行中最小公共元素 给你一个矩阵 mat,其中每一行的元素都已经按 递增 顺序排好了.请你帮忙找出在所有这些行中 最小的公共元素. 如果矩阵中没有这样的公共元素,就请返回 -1 ...
- 用最小的空间复杂度找出一个长度为n的数组且数据中的元素是[0,n-1]中任一个重复的数据。
用最小的空间复杂度找出一个长度为n的数组且数据中的元素是[0,n-1]中任一个重复的数据. 比如:[1, 2, 3, 3, 2, 2, 6, 7, 8, 9] 中 2 or 3 分析:这道题目,实现比 ...
随机推荐
- Mysql JSON字段提取某一个属性值的函数
mysql从5.7开始才支持JSON_EXTRACT等 JSON相关的函数, 项目里用到的mysql是5.6的,需要提取JSON字段里某一个属性值进行统计, 自己写了一个笨的提取方法: CREATE ...
- PhoenixFD插件流体模拟——UI布局【Splash | Mist】详解
液体飞溅 | 水雾 本文主要讲解Splash | Mist折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Splash+ ...
- Linux运维精华面试题
1.什么是运维?什么是游戏运维? 1)运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务的上线与运作的正常,在他运转的过程中,对他进行维护,他集合了网络.系统.数据库.开发.安全.监控于一身 ...
- I2C与SMBus
关于I2C与SMBus,许多人很少去谈论与了解两者的细节差异,包括很多国外的简报,文章也经常将两者混写.交杂描述.交替运用. 确实,在一般运用下,I2C Bus与SMBus没有太大的差别,从实际接线上 ...
- 浙江省赛之Singing Everywhere
题目:http://acm.zju.edu.cn/onlinejudge/showContestProblem.do?problemId=5996 方法: 在大佬的指导下完成. 寻找峰值,找到一共k个 ...
- JAVA常用注解
摘自:https://www.cnblogs.com/guobm/p/10611900.html 摘要:java引入注解后,编码节省了很多需要写代码的时间,而且精简了代码,本文主要罗列项目中常用注解. ...
- 2. 2A03简介
2A03简介 1.CPU 1.1 内部寄存器 1.累加寄存器A(Accumulator):8位寄存器,用于同算术逻辑单元(ALU)共同完成各种算术逻辑运算,它既为ALU提供原始操作数又担任存放ALU运 ...
- ztree实现中国省市区树形,可多选
首先表 CREATE TABLE `sys_area` ( `id` INT(11) NOT NULL COMMENT '编号', `parent_id` INT(11) NOT NULL COMME ...
- vue-cli 2.x脚手架build目录中的webpack.base.conf.js配置文件
此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件,适用于vue-cli 2.x版本 此配置文件是vue开发环境的wepack相关配置文件,主要用来处 ...
- Spring Boot Web应用开发 CORS 跨域请求支持:
Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...