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 ...
随机推荐
- Spring Framework学习总结
一.Spring 概述 Spring 有两个核心部分: IoC 和 AOP. Spring 是一种基于 Bean 的编程技术,它深刻地改变着 Java 开发世界.Spring 使用简单.基本的 Jav ...
- Matlab %陆
第六章 MATLAB IN ENGINEERING Polynomial Differentiation多项式微分 %幂级数 f(x) = x^3-2x-5; p = [1 0 -2 -5] %自 ...
- VBA中的集合
Sub testSet() Dim c As New Collection c.Add ("A") c.Add (2) c.Add ("A") For i = ...
- 浮动静态路由和BFD联动
浮动静态路由和BFD联动实现路由自动更新 路由器的工作是将数据包从源设备转发到目标设备.在它们之间可能有几个路由器.路由器使用称为路由表的数据库来转发这些数据包.静态路由(Static ...
- Docker部署NextCloud
docker run -d -p 80:80 nextcloud 数据库可以选Mysql或者Pg 下载客户端 https://nextcloud.com/
- 关于rust cargo下载依赖慢的解决方法(转载)
网址: https://zhuanlan.zhihu.com/p/74875840?from_voters_page=true win环境基本输入两个命令就好了 $env:http_proxy=&qu ...
- button 样式 触发器
<Style x:Key="Style.OkOperationButton" TargetType="ButtonBase"> <Setter ...
- 关于tomcat部署web服务方式
方式1.apache-tomcat-8.0.47\webapps文件夹下放war包会自动解压.文件夹名称就是访问路径 方式2.apache-tomcat-8.0.47\conf\Catalina\lo ...
- 【Airtest相关】收集一些Airtest的介绍
1.项目简介 ui自动化一直是个让人头疼的事,主要是因为系统兼容性难度较大和开发维护成本比较高, 以前使用过appium,通用性比较差,并且开发有一定的基础才行,更难以忍受的是后期的维护成本:然后接触 ...
- Linux & 标准C语言学习 <DAY9_1>
2.函数传参: 1.函数中定义的变量属于该函数,出了该函数就不能再被别的函数直接使用 2.实参与形参之间是以赋值的方式进行传递数据的,并且是单项值传递 ...