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 ...
随机推荐
- PHP判断0和空的方法
可以兼容,传参数,或者不参数与0的判断 if ( isset($data['other_id']) && (!empty($data['other_id']) || is_nume ...
- 调用d2l.plt.imshow(img)不报错、不显示图像的问题
解决方案: 加入如下所示的代码: import matplotlib.pyplot as plt d2l.plt.imshow(img) plt.show()
- ArrayList学习
核心源码 package java.util; import java.util.function.Consumer; import java.util.function.Predicate; imp ...
- MYSQL 变更账号密码
#1 首先找到Mysql[安装的路径],切换到对应的bin目录,例如安装在D盘 C:User\Administrator> d:(输入盘符回车) D:\> cd D:\MySQL\MySQ ...
- element表格样式的修改
修改表格头部背景 .el-table th{ background: #f00; } 修改表格行背景 .el-table tr{ background: #f00; } 修改斑马线表格的背景 .el- ...
- SQL字符匹配
一般形式 列名 [not] like 'str' 匹配串可以是以下四种通配符: 单下划线 _:匹配任意一个字符: %:匹配0个或多个字符: [ ]:匹配[ ]中的任意一个字符(若要比较的字符是连续的, ...
- 微信小程序-顶部下拉菜单实现
最近写的小程序里面需要实现顶部下拉菜单的效果,做一个过滤操作,但是没有找到相关组件,所以动手写了一个. 先看一下这拙劣的效果叭~ 下面就直接看具体实现了嗷! index.wxml <view c ...
- GO语言学习笔记-反射篇 Study for Go ! Chapter nine - Reflect
持续更新 Go 语言学习进度中 ...... GO语言学习笔记-类型篇 Study for Go! Chapter one - Type - slowlydance2me - 博客园 (cnblogs ...
- 解析极限编程-拥抱变化_V2
作者:Kent Beck 第一章 极限编程定义 XP(极限编程):extreme programming,适用于中小型团队在需求不明确或迅速变化的情况下进行软件开发的轻量级方法学. 第二章 学习开车 ...
- 分布式CAP_BASE博客参考
https://blog.csdn.net/lixinkuan328/article/details/95535691 CAP 一致性(Consistency) 可用性(Availability) 分 ...