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 ...
随机推荐
- Vue 使用插件nprogress页面加载进度条
下载 npm i nprogress 在main.js中引入: import App from './App' import VueRouter from 'vue-router' import ro ...
- This will upgrade your R installation.
sudo add-apt-repository ppa:marutter/rrutter sudo apt update sudo apt full-upgrade
- Centos 8 部署harbor 访问502
部署过程不做多说, 部署完之后访问502, 以下可能只是一种情况, 有可能是其它情况导致的503 查看日志 core.log 提示访问数据库被拒绝 贴出解决方案:https://github.com/ ...
- VisualVM简单配置以及插件安装
一.概述 VisualVM是随JDK发布的功能很强大的运行监视和故障处理程序.除了运行监视,故障处理外,还提供了很多其他方面的功能,如性能分析等.它有一个很大的优点:不需要被监视的程序基于特殊Agen ...
- .net core 版本避坑 无法打开项目文件。 无法找到 .NET SDK。请检查确保已安装此项且 global.json 中指定的版本(如有)与所安装的版本相匹配。
打开项目根目录,输入 dotnet --version ,查看本机安装的最高版本的sdk: 如果源文件中存在global.json文件,直接打开修改即可: 不存在则接着在1步骤后输入: dotnet ...
- 4.javaweb-thymeleaf
1.知识回顾: 1. post提交方式下的设置编码,防止中文乱码 request.setCharacterEncoding("utf-8"); get提交方式,tomcat8开始, ...
- websocket 数据分析
WebSocket是一种通过单个TCP连接提供全双工通信信道的协议.2011年,IETF将WebSocket协议标准化为RFC 6455,W3C正在对Web IDL中的WebSocket API进行标 ...
- 使用chatgt(GPT-4)将过程式(的java代码)改成函数式(的elixir代码)
天啦噜太可怕了,之前我还嘲笑chatgpt不会小众语言来着. chatgt(GPT-4)在接收2次prompt后,把过程式(的java代码)改成了函数式(的elixir代码),给出的Elixir代码可 ...
- 【微信网页授权】SpringBoot+uniapp实现网页授权获取用户基本信息
前言 缘由 起因于本狗上一个项目本打算采用微信公众号网页授权登录做用户鉴权,但最终因公众号是未认证的订阅号,无权限获取用户信息,所以改变思路,采用登录注册方式实现用户区分.但在开发中,学习了微信网页授 ...
- ByteHouse MaterializedMySQL 增强优化
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 前言 社区版 ClickHouse 推出了MaterializedMySQL数据库引擎,用于将 MySQL 中的表 ...