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 ...
随机推荐
- ASP.NET在Repeater中使用Button控件报错
普通Button在这里会报错,小编找了一天也没有解决这个问题, 这里可以换做LinkButton或者ImageButton替换普通的Button
- 整数划分问题(Java递归)
整数划分问题(Java递归) 文章目录 整数划分问题(Java递归) 0. 问题描述 1.递归式 2.代码 3.参考 0. 问题描述 整数划分问题 将正整数n表示成一系列正整数之和:n=n1+n2+- ...
- git 本地项目初始化提交至仓库
命令行指令 Git初始化配置 git config --global user.name"abc" git config --global user.email"1234 ...
- 字符串练习1 于是他错误的点名开始了(Trie)
题目链接在这里:P2580 于是他错误的点名开始了 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 是一道trie树的板子题,注意理解trie树的每一个节点代表的是一个状态,这个状态 ...
- GO语言http请求方法,可以携带请求头Header与cookie
1.目录 2.main.go package main import "fmt" import "demo/common/http" func main() { ...
- F. K-th Power 容斥,莫比乌斯
F. K-th Power 传送门: 牛客:https://ac.nowcoder.com/acm/contest/34866/F cf:https://codeforces.com/group/5z ...
- 线程Thread小记
1 public class ConcurentDemo extends Thread { 2 @Override 3 public void run() { 4 super.run(); 5 Sys ...
- 记一次 .NET某汽车零件采集系统 卡死分析
一:背景 1. 讲故事 前段时间有位朋友在微信上找到我,说他的程序会出现一些偶发卡死的情况,让我帮忙看下是怎么回事,刚好朋友也抓到了dump,就让朋友把 dump 丢给我,接下来用 windbg 探究 ...
- SQL统计(一)
参考博客: https://blog.csdn.net/GuTiDong/article/details/81326787 按月份统计每个月的订单总金额 https://blog.csdn.net/h ...
- cost function 成本函数
cost function 成本函数 cost function-成本函数 1.目标 :实现和探索具有一个变量的线性回归的成本函数. import numpy as np %matplotlib wi ...