scrollTop和scrollIntoView

// 1. 滚动到我要申请页面, 开始用的
let htmlDom = document.documentElement
htmlDom.scrollTop =  htmlDom.offsetHeight;// 结果....苹果有效果, 安卓没有效果, chrome 56版本的也没有效果(不支持scrollTop)// 2. 改用了scrollIntoView  让元素滚到可视区域!!!!!
let dom = document.getElementsByClassName('我要申请')
dom &&  dom.scrollIntoView(true); // true的话到窗口顶部, false到窗口底部;
// {block: "end"} start center nearest: 垂直滚动, 附近的区域, 离顶部近就顶部,离底部近就底部(在可视范围则不生效)
// {behavior: "smooth", block: "end", inline: "nearest"}

注意一下: 一些属性还是老版本的不生效. 比如平滑滚动和滚动到底部,中部
查看浏览器版本: http://www.useragentstring.com/

移动端滚动穿透

1. 唤起弹窗的时候设置 overflow: hidden; height:100%;
2. 关闭弹窗去掉上面的样式, 但是点弹窗的时候记录下 window.scrollY值, 保存一下.
this.$nextTick(() => {window.scrollTo(0, this.scrollY) // 关闭弹窗的时候再赋值回去.
})scrollIntoView 也可以用来解决键盘遮挡(安卓)

window.scrollTo(0, 0)

scrollTop和scrollIntoView相关推荐

web实现置顶、置底功能、聊天页面、锚点、滚动条、vue、scrollTop、scrollIntoView、scrollHeight
目录前言 1.代码实现 3.scrollTop实现置顶置底(方式一) 4.scrollIntoView实现置顶置底(方式二) 5.总结前言在项目中遇到聊天功能,功能涉及置顶和置底知识,由此记录一 ...
聊天窗口内容滚动到底部的方法scrollTop和scrollIntoView
测试内容样式: <style type="text/css">#container{overflow-y:auto; overflow-x:hidden; height ...
前端面试分享：秋招总结（html和css篇）
今年秋招结束了,虽然拿到的offer不多,不能和大佬们相比,但是自己已经满足了.秋招的过程中一直在总结面试遇到的一些问题,今天按照知识板块做一个整理,希望能有助于要求职的各位. 一. Html相关 ...
微信小程序基础(一) 文件结构配置项
文章目录一.配置文件二.页面主体 1.json文件全局json配置页面json配置 2.wxml文件基础元素内置组件 3.wxss 目录结构: pages目录下每个子目录对应一个页面, L ...
vue+docxtemplater实现读取word文档，根据后端数据生成echarts图表插入word，并下载为docx格式文件
一.需求 word自带的图表不能满足需求,并且编写过程繁琐,需要写一个页面,主要功能是能读取服务器的word模板,根据后台给的数据,自动生成echarts图表并插入到word指定位置,然后点击能下载插 ...
uniapp聊天室动画加载新消息
这段时间一直在利用uniapp做聊天室的功能,这里分享下发送新消息,接收新消息怎么像QQ那样滚动加载. 首先我是查了一下网上的朋友,看了下大多都是使用scroll-top实现的,所以我也试了一下这个东 ...
浏览器的重排与重绘是什么意思？
准备为了理解重排与重绘,我们首先需要了解一点浏览器渲染的基础知识 ~ 网页生成分为五步: 1. HTML 被 HTML 解析器解析成 DOM 树 2. CSS 被 CSS 解析器解析成 CSSOM ...
2021-06-21 小米前端实习电话面试题目
小米前端实习电话面试题目整理自我介绍说一下css的优先级盒子水平居中和垂直居中 1. 定位 2. CSS3 3.flex 4.display: table-cell 说一下防抖和节流 JS的事件 ...
重排 (reflow) 与重绘 (repaint)
前言本文依旧是日常学习总结篇,主要是要理解浏览器的重排与重绘. 一.浏览器解析渲染页面过程当浏览器获得一个 html 文件时,会 "自上而下" 加载,并在加载过程中进行解析渲染 ...

scrollTop和scrollIntoView

移动端滚动穿透

window.scrollTo(0, 0)

scrollTop和scrollIntoView相关推荐

最新文章

热门文章