js 获取窗口/容器内部滚动位置
前端
(document.getElementsByClassName("container")[0]).scrollTop -- 容器内部滚动条位置
(document.getElementsByClassName("container")[0]).scrollHeight -- 容器内部滚动区域高度
(document.getElementsByClassName("container")[0]).offsetHeight-- 容器自身在上层容器的滚动位置
(document.getElementsByClassName("containerItem")[0]).getBoundingClientRect() -- 元素距离窗口上方的相对位置。
容器内部滚动条是否滚动到底部:
var container=document.getElementsByClassName("leftCommentRecord")[0];
container.scrollTop+container.offsetHeight==container.scrollHeight
注:offsetHeight与clientHeight看具体情况使用,窗口内滚动使用offsetHeight,容器内部滚动使用clientHeight。
小程序
1 <ScrollView
2 className={classnames(
3 'evaluateParent',
4 )}
5 scrollY
6 enableBackToTop
7 scrollAnchoring
8 onScroll={(event) => this.onPageScrollChanged(event.detail)}
9 style={{ height: wx.getSystemInfoSync().windowHeight }}
10 />
距离顶部位置:
js 获取窗口/容器内部滚动位置的更多相关文章
- js获取编辑框游标的位置
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- Javascript 获取窗口的大小和位置
在Javascript中可以使用OuterWidth,OuterHeight 获取浏览器的大小.用 innerWidth,innerHeight 来获取窗口的大小(除去浏览器边框部分).对于IE6 及 ...
- js获取输入框中当前光标位置并在此位置插入字符串的方法(angularjs+ts)
一半是参照别人代码,一半是自己代码,略笨拙,如果有更好的方法希望分享. 获取当前光标位置的方法 getCaretPosition (obj:any) { //获取输入框中当前光标的位置,obj为此输入 ...
- js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度
1.获取窗口可视范围的高度 //获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientH ...
- js获取窗口参数
window.onscroll=function getScrollTop(){ console.log(scrollTop) if(document.documentElement&& ...
- [原]js获取dom元素的实际位置及相对坐标
关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/ ...
- JS获取和设置光标的位置
<html> <head> <script language="javascript"> function getCursortPosition ...
- js获取元素宽高、位置相关知识汇总
常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...
随机推荐
- 关于Centos7Th 初始化的一些概述
- 概述 Q:为什么要初始化,什么是初始化? A:一般初始化是根据的后期要部署的业务环境来定制的,新装的系统其自带的软件不够支撑各种开发环境或者运维工作:需要部署和设置对应的安全环境.开发/运维软件. ...
- Asp.net zero项目框架和配置
- Eclipse's Content Assist
在Eclipse里面的辅助智能索引只有"."才会提示,或者手动按alt+/补全提示.因为Eclipse的补全功能的默认设置只有".",其实你只需要稍微修改一下就 ...
- java锁之初相见
废话不多说,先上锁的分类图 1.乐观锁&悲观锁 悲观锁 悲观锁认为自己在使用数据的时候一定有别的线程来修改数据,因此在获取数据的时候会先加锁,把别的线程阻塞住,最终确保数据不会被别的线程修改. ...
- 使用Jmeter进行https接口测试时,如何导入证书?
转载:https://www.cnblogs.com/tester-zhangxiaona/p/12295473.html
- https传输流程(加密方式、证书、传输安全)
http的缺点 http的数据是明文传输 如果用明文传输 很容易被第三方获取到传输的数据 因此我们一般要在网络传输过程中对数据进行加密 常见的加密方式 对称加密 秘钥key 待加密数据data a和b ...
- centOS7 + MongoDB 3.6.22 集群搭建 - 切片+副本集 - 个人学习
因为我是学习这个,所以是安装成功之后自己再记录一下过程,mongodb是重新安装的,参考博客:MongoDB 3.6.9 集群搭建 - 切片+副本集 1. 服务结构介绍 结构图: 结构图解: 1. S ...
- ASP.NET Core Web API Swagger 按标签Tags分组排序显示
需求 swagger页面按标签Tags分组显示. 没有打标签Tags的接口,默认归到"未分组". 分组内按接口路径排序 说明 为什么没有使用GroupName对接口进行分组? 暂时 ...
- JMM知识点总结
JMM知识点总结 一.什么是JMM? 不知道大家在学习的过程有没有思考过这两个问题 为什么说java是跨平台语言 导致并发问题的原因是什么 第一个问题,我是这么理解的,代码运行本质上是将我们写的语言转 ...
- java多线程基础小白指南--线程的状态
线程的状态比较混乱,网上的资料也是五花八门,这时候就要参考 注意截图中的最后一句话,很多人把jvm中线程状态与实际上的os线程状态搞混了,所以才会有很多乱七八糟的状态出现. 注意Runnable其实含 ...