流浪鱼
流浪鱼

offset，position，scrollTop/scrollLeft

offset，position，scrollTop/scrollLeft函数使用

（1）offset：获取当前元素相对于文档 的高度。只对可见元素有效。

(2) position:获取元素相对于最近的一个position为relative or absolute 的元素的祖父节点的相对偏移。

（3）scrollTop/scrollLeft是分别获取该元素滚动条距元素顶端 的距离。

scrollTop指的就是当前元素有滚动条 时，元素的顶部 距离滚动条顶部 (即图红色的部分，千万不要理解为是滚动块那部分)的距离

如果该元素没有滚动条那就无所谓的scrollTop了


offset，position，scrollTop/scrollLeft

即不是到滚动块距离


offset，position，scrollTop/scrollLeft

你可能感兴趣的:(scrollTop)

  • element-ui table 点击分页table滚到顶部 烂笔头儿@ vue.js前端
    在开发项目过程中遇到这样一个问题使用table表格的时候，切换分页之后不会回到顶部，还是停留在之前滚动的位置话不多说以下是解决方法：设置table的ref=‘multipleTable’//切换分页的方法加上下面这句，table就能自动滚到顶部this.$refs.multipleTable.bodyWrapper.scrollTop=0;希望能够帮到你看到这如果帮到你了留个小心心吧关注不迷路~
  • 【elementUi-table表格】 滚动条 新增监听事件； 滚动条滑动到指定位置； 今天搬砖了么 前端elementui前端javascriptvuehtml
    1、给滚动条增加监听this.dom=this.$refs.tableRef.bodyWrapperthis.dom.scrollTop=0let_that=thisthis.dom.addEventListener('scroll',()=>{//获取元素的滚动距离letscrollTop=_that.dom.scrollTop//获取元素可视区域的高度letclientHeight=this.
  • 前端页面筛选框置顶显示 wsmmint
    /***筛选框置顶显示*@param{string}idname-需要置顶的元素id*/functionsearchFloat(idname){vartop=$(idname).position().top;$(window).scroll(function(){if($(document).scrollTop()>top){／／这里是判断页面宽度过小就不再置顶if($(window).width
  • oracle查询中间条记录,oracle SQL查询中间若干条记录 y921112y921112 oracle查询中间条记录
    方法一：利用rownum和差集函数minusselect*from(select*fromemporderbysal)whererownumfirst();Eloquent内部使用的是PDO参数绑定,所以你的请求是安...vue实现pc端无限加载功能主要思路通过自定义指令,在视图初始化完成后,绑定scroll事件.当scrollTop+clientHeight>=scrollHeight时(此时滚
  • scrollTop Jadon7
    window.onscroll=function(){varoDiv=document.getElementById("div1");scrollTop=document.documentElement.scrollTop;//div距离页面顶部的距离=运动函数(parseInt取整((当前网页高度-div的实际高度)除以2+滑动距离)oDiv.style.top=motion(parseInt(
  • 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示（案例）（返回顶部） 友人！ 代码案例
    $(function(){//绑定滚动条事件//绑定滚动条事件$(window).bind("scroll",function(){varsTop=$(window).scrollTop();varsTop=parseInt(sTop);if(sTop>=400){if(!$("#float-top").is(":visible")){try{$("#float-top").slideDown()
  • position: sticky 防坑指南 fuheideMayuyu
    今天在写小程序项目的时候碰到一个需求是要把轮播图下面的标签栏滑动到顶部后固定，类似网易考拉小程序这种效果：image.png，刚开始是准备使用，js计算距离顶部高度，然后使用position：fixed,来实现的。在使用scroll-view，计算scrollTop的值，当scrollTop大于190时，添加样式position：fixed，但是这个方法在真机测试的时候有会性能问题，造成页面卡顿，
  • 当给元素添加scrollTop设置偏移时候存在失效的问题 sun_weitao html5
    如果在元素上应用了zoom缩放属性，并且你希望使用scrollTop方法来滚动到指定位置，可能会导致scrollTop失效的问题。这是因为zoom属性会影响元素的尺寸和滚动行为。要解决这个问题，你可以尝试以下方法之一：使用transform缩放代替zoom：将zoom缩放属性替换为transform缩放属性。这样做可以避免scrollTop失效的问题。例如，使用transform:scale()来
  • 微信小程序scroll-view滚动scrollTop不准确 woshiabc111 微信小程序javascript小程序
    小程序里使用scroll-viewbindscroll="scroll"内的scroll方法可检测滚动距离scroll(e){console.log('滚动距离：'+e.dateil.scrollTop)}但是在快读滚动的过程中明明已经滚动到顶部了scrollTop竟然还在300。缓慢滑动虽然没有问题，但是在快速滚动的时候scrollTop会出现非常大的误差。以下是解决方法1.这是因为每次滚动监听
  • React+Antd实现表格自动向上滚动 小浣熊喜欢揍臭臭 ReactAntdreact.jsjavascript前端
    1、效果2、环境1、react182、antd4+3、代码实现原理：创建一个定时器，修改表格ant-table-body的scrollTop属性实现滚动，监听表层的元素div的鼠标移入和移出实现实现鼠标进入元素滚动暂停，移出元素的时候表格滚动继续。一、滚动组件实现如下，/***公共组件：表格滚动*/import{Table}from'antd';import{useEffect,useRef}fr
  • 整屏滑动思路 goToKnowMore 新手整屏滑动思路
    首先要有几个div或者section或者li,然后通过js得到他们的个数，然后每次滑动scrollTop（n*height）；这个height可以根据$(window)来进行得到，也可以自己设置一个固定值
  • vue解决 页面A跳转到页面B，B页面停留在A页面的滚动位置的解决方法 Brian_1975
    //全局路由守卫router.beforeEach((to,from,next)=>{//to:Route:即将要进入的目标路由对象//from:Route:当前导航正要离开的路由//next:Function:一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。//A跳转到B，B页面停留在A页面的滚动位置；解决方法：将scrollTop设置为0window.scroll
  • 解决elementui plus 设置导航栏置顶不生效问题 开源字节 大前端vueelementuijavascriptvue.js
    //跳转路由后导航栏置顶scrollBehavior(to,from,saveScrollPosition){//console.log(document.documentElement.querySelector(".el-main").scrollTop);//通过此方法去改变elementui滚动条高度document.documentElement.querySelector(".el-m
  • [element-ui] table 点击分页table滚动到顶部 533_ element-ui前端
    解决方法：设置table的ref='multipleTable'watch:{tableData:{//tableData是表格数据handler(){this.$nextTick(()=>{//滚动到顶部this.$refs.multipleTable.bodyWrapper.scrollTop=0;});},deep:true,immediate:true,},},element-uitabl
  • [element-ui] el-table 行内新增，滚动条自动滚到最顶部，或者最底部 533_ element-uivue.js前端elementui
    letitem={name:'111',age:22,}this.dataList.push(item)//跳到底部操作this.$nextTick(()=>{this.$refs.containerTable.bodyWrapper.scrollTop=this.$refs.containerTable.bodyWrapper.scrollHeight});//跳到顶部操作this.$refs.
  • el-table滚动加载下一页 珊珊美眉 javascriptvue.js前端
    //获取表格对象letdom=document.querySelector(".el-table__body-wrapper");letthat=this;dom.addEventListener("scroll",()=>{if(!that.addLoading){constscrollDistance=dom.scrollHeight-dom.scrollTop-dom.clientHeigh
  • 【vue】点击定位到页面的某个位置 香菜啵子欸 vue.jsjavascript前端
    点击按钮定位到页面的某个位置backTop(){//box表示需要定位到的divconstscrollTop=document.getElementById("box");scrollTop.scrollIntoView();},
  • 电梯导航---js实现 真的想不出名儿 JavaScriptjavascript前端
    需求：一、点击左边的小li，会滚动到右边对应的内容区（电梯导航->内容区）①当滚动到某一位置时，就让电梯导航显示出来②点击电梯导航页面可以滚动到相应内容区域③核心算法：因为电梯导航模块和内容区模块是一一对应的，所以对应的索引号是一样的④当点击电梯导航某个小模块时，就可以拿到当前小模块的索引号⑤利用document.documentElement.scrollTop跳转页面二、当滚动到右边的内容区，
  • jq实现下拉加载更多 cs大个子女生
    实现的效果jq代码$(function(){$('.menu_des_rg').scroll(function(){varaad=$(".menu_data").height();varbbd=$('.menu_des_rg').scrollTop()+$('.menu_des_rg').height()-$(".menu_rg_fixed").height();console.log("aa"+
  • js如何实现滚动到底部一键回到顶部。 Ma - hossihr javascript前端vue.js
    jquer语法$(window).scroll(function(){//为了保证兼容性，这里取两个值，哪个有值取哪一个//scrollTop就是触发滚轮事件时滚轮的高度letscrollTop=document.documentElement.scrollTop||document.body.scrollTop;console.log("滚动距离"+scrollTop);})获取到滚动的距离不就
  • vue跳转页面后scrollTop问题 coolSummer003
    importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router);Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'HelloWorld',component:resolve=>require(['../components/HelloWorld.vue'],res
  • JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图） 渔舟唱晚@ javascript前端开发语言
    这里是javascript中制作滚动代码的常用属性页可见区域宽：document.body.clientWidth;网页可见区域高：document.body.clientHeight;window.innerHeight;网页可见区域宽：document.body.offsetWidth(包括边线的宽);网页可见区域高：document.body.offsetHeight(包括边线的宽);网页正
  • el-scrollbar自动滚动到底部 张滚滚QAQ vue.jsjavascript前端
    内容滚动到底部的方法：chatListScrollBottom(){constelement=document.querySelector('.chatList')constheight=element.offsetHeightthis.$refs['scrollbar'].wrap.scrollTop=height}
  • 微信小程序scroll-view组件使用scroll滑动事件中的scrollTop有时不为0的问题 打响第一枪 微信小程序小程序
    问题：scroll-view的scroll滑动事件，经常会有这样的问题：scroll-view滑动到顶部后，最后的事件中的scrollTop不为0、toupper事件也没有收到等原因：scroll-view组件自带节流，所以滑动过快时，会出现滑到顶部，scrollTop不为0的bug。因为部分scroll事件被节流掉了。解决方法：添加throttle="{{false}}"属性，关闭官方默认节流，
  • scrollTop回到顶部总结 喜欢唱Hi歌的
    网站中的回到顶部功能有益于增强用户体验，当一个页面很长很长时，回到顶部是必不可少的。回到顶部按钮，可以使用图片，背景图，矢量字体图标，也可以使用代码css生成。这里使用css生成的方法。#toTop{display:none;position:fixed;/*固定定位*/right:10px;bottom:30px;background-color:#e6e6e6;height:40px;line
  • 滚动条滚动到底部 记录学习生活
    在table中添加行滚动条自动滚动到最后一行lettableScroll=document.querySelectorAll('.tableScroll')//获取tablethis.$nextTick(()=>{console.log(tableScroll)for(leti=0;i
  • Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部 码农键盘上的梦 vueJavaScriptvue.jsjavascript前端
    功能：Vue3在点击菜单切换路由时，将页面el-main的内容滚动到顶部，布局如下，使用UI组件库为ElementPlus在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0)或window.scrollTo(0,0)滚动，但是我使用无效，于是使用操作dom的方法，如下可以使用watch函数来监听当前路由的变化，当路由变化后滚动到顶
  • 滚动条滚动到可视区域加载数据 你我的微笑
    实现功能：页面某版块，当滚动条滚动到该区域时加载数据，否则不加载，节省页面加载时间加一个开关，当ajax请求成功后，关闭，防止不停的无限的循环加载，优化，进入ajax就设置开关。$(function(){varisload=true;$(window).scroll(function(){varfold=$(window).height()+$(window).scrollTop();if(fol
  • js 滑动内嵌滚动条 TiantianMami UI自动化python3python
    js='document.querySelector("#root>section>main").scrollTop=10000'driver.execute_script(js)找到滚动条div，copyjspath即可
  • Vue监听窗口滚动事件 黄小仙ya VUEjavascript开发语言ecmascript
    Vue监听窗口滚动事件例子：当video滚动到可视区时自动播放所需数据获取数据、监听窗口滚动事件处理函数例子：当video滚动到可视区时自动播放所需数据data(){return{window_height:null,//浏览器可见区域高度scrollTop:null,//页面被卷去的高度My_video_top:null,//目标元素到顶部的高度My_video_Height:null,//目标
  • 多线程编程之存钱与取钱 周凡杨 javathread多线程存钱取钱
      生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
  • java中数组与List相互转换的方法 征客丶 JavaScriptjavajsonp
    1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。 　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
  • Shell 流程控制 daizj 流程控制if elsewhilecaseshell
    Shell 流程控制 和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语
  • Linux服务器新手操作之二 周凡杨 Linux 简单 操作
    1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k
  • socket聊天室之服务器搭建 朱辉辉33 socket
    因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock
  • 利用finereport建设保险公司决策分析系统的思路和方法 老A不折腾 finereport金融保险分析系统报表系统项目开发
    决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。   项目背景介绍 通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
  • 始终要页面在ifream的最顶层 林鹤霄
    index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram
  • MySQL binlog恢复数据 aigo mysql
    1，先确保my.ini已经配置了binlog：   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win
  • OCX打成CBA包并实现自动安装与自动升级 alxw4616 ocxcab
    近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.
  • Hashmap队列和PriorityQueue队列的应用 百合不是茶 Hashmap队列PriorityQueue队列
      HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H
  • JDK1.5 returnvalue实例 bijian1013 javathreadjava多线程returnvalue
    Callable接口： 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。        ExecutorService接口方
  • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 bijian1013 JavaScriptAngularJS
            在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！     
  • 【Java范型二】Java范型详解之extend限定范型参数的类型 bit1129 extend
    在第一篇中，定义范型类时，使用如下的方式：   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题：   1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
  • 【HBase十三】HBase知识点总结 bit1129 hbase
    1. 数据从MemStore flush到磁盘的触发条件有哪些？    a.显式调用flush，比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成
  • 服务器被DDOS攻击防御的SHELL脚本 ronin47
    mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
  • java程序员生存手册-craps 游戏-一个简单的游戏 bylijinnan java
    import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
  • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决 开窍的石头 JAVA_HOME
    当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下：   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou
  • [操作系统内核]操作系统与互联网 comsci 操作系统
         我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
  • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11 cuityang 富文本框
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit
  • Property null not found darrenzhu datagridFlexAdvancedpropery null
    When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
  • MySQl数据库字符串替换函数使用 dcj3sjt126com mysql函数替换
    需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下：   updat
  • mac上终端起动MySQL的方法 dcj3sjt126com mysqlmac
    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1
  • Gson使用一（Gson） eksliang jsongson
    转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 第二种类型是序列（sequence），又叫做数组（array）
  • android点滴4 gundumw100 android
    Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch
  • JavaWeb之JSP基本语法 ihuning javaweb
      目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
  • App Extension编程指南（iOS8/OS X v10.10）中文版 啸笑天 ext
             当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
  • SQLServer实现无限级树结构 macroli oraclesqlSQL Server
    表结构如下： 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla
  • Css居中div，Css居中img，Css居中文本，Css垂直居中div qiaolevip 众观千象学习永无止境每天进步一点点css
    /**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; }
  • Oracle 常用操作(实用) 吃猫的鱼 oracle
    SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
  • iOS中使用RSA对数据进行加密解密 witcheryne iosrsaiPhoneobjective c
      RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他