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 ...
随机推荐
- 2020/10/3笔记-网络概述、拓扑类型、OSI模型
网络(network) 1.什么是网络 计算机网络(简称为网络)由若干节点(node)和连接的链路组成.网络中的节点可以是计算机.集线器.交换机或路由器等. 2.网络的作用是什么 网络最终为了解决的问 ...
- Python之常用数据类型详解
tuple 元组 1 # 定义 2 temp = (2, ) # 规范定义,单个元素的元组 3 tem = 2, # 可行,但不规范定义 4 tep = () # 空元组 5 6 tp = (1, ' ...
- 【javascript】chormeV8源码阅读之 GC(垃圾回收)过程 笔记
1.为何需要垃圾回收 在V8引擎逐行执行JavaScript代码的过程中,当遇到函数的情况时,会为其创建一个函数执行上下文(Context)环境并添加到调用堆栈的栈顶,函数的作用域(handl ...
- iview 中Modal组件点击确定后验证信息不通过则不关闭弹窗方法
<Modal v-model="isTemManageShow" title="管理模板" @on-ok="ok" :loading= ...
- PointGNN未修改之前的结果 ---行人,骑行者
dl 18 23
- archlinux 源配置 桌面美化 终端美化 常用软件 grub配置
简介 本文讲对archlinux进行一些基础系统的配置.常用安装的安装,美化进行配置,先看一下美化后的效果吧 配置pacman和使用AUR(archlinuxcn源) archlinux采用滚动更新的 ...
- Python学习笔记--布尔类型和比较运算符、if判断语句以及相关案例的实现
布尔类型和比较运算符 代码: 结果: 主要有以下几类: 注意:bool类型的真假表示开头必须大写,例如:True和False 而要是想要得到布尔类型,除了直接定义,还可以通过比较运算得到布尔类型: i ...
- 【读书笔记】排列研究-置换角度(分解为Products Of Cycles) 含GroupExploer使用
upd 2020-08-06 23:11完成了最初稿 目录 定义 开胃菜 entrée 群论角度 应用:几何变换 当然要从第一类斯特林数的角度来考虑一下 一个排列的type定义 排旗公式 应用-共轭排 ...
- springboot--多环境启动
法一: 法二:
- CSS 高阶小技巧 - 角向渐变的妙用!
本文将介绍一个角向渐变的一个非常有意思的小技巧! 我们尝试使用 CSS 绘制如下图形: 在之前,类似的图案,其实我们有尝试过,在 单标签实现复杂的棋盘布局 一文中,我们用单标签实现了这样一个棋盘布局: ...