【scrollBy 与 scrollTop的区别】的更多相关文章

scrollBy 与 scrollTop的区别

scrollTo是相对于初始位置 scrollBy是相对于上次移动的最后位置…

关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var node1 = document.querySelector('#father'); var node2 = document.querySelector('#child'); console.log('offsetTop==offsetHeight==scrollTop==scrollHeight==cli…

[学习总结]1、View的scrollTo 和 scrollBy 方法使用说明和区别

参考资料:http://blog.csdn.net/vipzjyno1/article/details/24577023 非常感谢这个兄弟! 先查看这2个方法的源码: scrollTo: 1 /** 2 * Set the scrolled position of your view. This will cause a call to 3 * {@link #onScrollChanged(int, int, int, int)} and the view will be 4 * invali…

Android 界面滑动实现---Scroller类 从源码和开发文档中学习（让你的布局动起来）

在android学习中,动作交互是软件中重要的一部分,其中的Scroller就是提供了拖动效果的类,在网上,比如说一些Launcher实现滑屏都可以通过这个类去实现..   例子相关博文:Android 仿 窗帘效果 和 登录界面拖动效果 (Scroller类的应用) 附 2个DEMO及源码   在广泛使用的侧边滑动导航开源库 --SlidingLayer其实就是使用到了Scroller类进行的实现,下载地址:GITHUB  ,下面要讲的不是这个库,而是这个库的实现过程中使用到的---Scrol…

Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码

在android学习中,动作交互是软件中重要的一部分,其中的Scroller就是提供了拖动效果的类,在网上,比如说一些Launcher实现滑屏都可以通过这个类去实现.下面要说的就是上次Scroller类学习的后的实践了. 如果你还不了解Scroller类,那请先点击:Android 界面滑动实现---Scroller类 从源码和开发文档中学习(让你的布局动起来) 了解之后再阅读以下内容,你会发现原来实现起来很简单.     之前说到过,在广泛使用的侧边滑动导航开源库 --SlidingLayer…

js中不同的height, top的对比

每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到这些已经不值一两次了,然后每次都要查看一下各自的区别,才能决定使用哪个. 今天特地花了一点时间整理了下各自的区别,本篇主要以chrome为准,可能各个浏览器之间还是有一些区别,但很多自己还未真正遇到过,还不是很清楚,等以后碰到了类似的兼容性问题,再记录到这里,这次就chrome浏览器中各个属性的区别…

详细解析 JavaScript 获取元素的坐标

引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题思考了一下.首先第一个问题是浏览器没有相关的 API 方法可以检测某个元素是否在可视区域,那么就只能我们人工计算,所以这里就涉及到了元素长宽,滚动条位置的知识.本文涉及的到的知识有元素长宽 clientWidth/offsetWidth/scrollWidth 的区别.以及 clientTop/of…

手把手教你打造一个心电图效果View Android自定义View

大家好,看我像不像蘑菇-因为我在学校呆的发霉了. 思而不学则殆 丽丽说得对,我有奇怪的疑问,大都是思而不学造成的,在我书读不够的情况下想太多,大多等于白想,所以革命没成功,同志仍需努力. 好了废话不说了,由于布总要做一个心电图的玩意,所以做来练练手,总之拿到的UI图如下: 做好的效果如下: 拿到图,先做一些简单的分析.呃.. 背景表格的绘制 心电图的绘制 背景表格的绘制: 首先drawColor黑色,然后用循环来画线. 心电图的绘制: 看样子是path,应该没问题. 于是就大干一番,按照这俩步骤…

超强js博客值得学习！！！

再读ecmascript 摘要: 这几天,又花了点时间看了下ecmascript.以下是我摘录出来的一些理解.在此记录下.第一部分:关于变量对象的理解1) 什么是变量对象?数据的存取与读取机制,就是变量对象. 变量对象 是执行上下文相关的对象,包括3种:变量 (var )函数定义(FD)函数形参2) 关于函数的argumentsfunction foo(x,y,z){ z=40; y=50; alert(arguments.callee===foo); alert(arguments.lengt…

Android开发工程师文集-Fragment，适配器，轮播图，ScrollView，Gallery 图片浏览器，Android常用布局样式

Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager fragmentManager = getFragmentManager(); FragmentTransaction beginTransaction = fragmentManager.beginTransaction(); 事务 add(),remove(),replace(),commit() My…

element对象

一.offset.client.scroll clientWidth,clientHeight,clientLeft,clientTop: offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent: scrollWidth,scrollHeight,scrollLeft,scrollTop. 二.clientWidth.offsetWidth.scrollWidth的区别 // 网页总高度 document.documentElemen…

鼠标滚轮更改transform的值（vue-scroller在PC端的上下滑动）

目前上拉刷新,下拉加载,以及区域回弹的组件,绝大多数都是通过transform去实现的.在移动端效果很好,但是PC端使用鼠标拖拽的方式,查看下文首先不符合逻辑,其次容易点进其他页面. 起初,项目的初衷是在微信浏览器中查看,但是客户反应有些页面pc端没办法上下滑动(使用了vue-scroller的页面都跪了).鼠标滚轮默认控制的是滚动条,不是容器的transform属性,怎么可能上下滑动. 然后就想如果能监听到鼠标滚轮事件,然后再更改transform:translate3d(x,y,z),这样不…

Js上下左右无缝隙滚动代码

转载:http://www.cnblogs.com/chenjt/p/4193464.html 主要用到dom.offsetWidth 这个表示实际的宽度. dom.scrollLeft 这个表示这个容器dom的滚动条的水平偏移. 核心代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional…

[置顶] 不再迷惑，也许之前你从未真正懂得 Scroller 及滑动机制

学习本来就是从困惑中摸索问题答案的过程,能够描述出来问题就已经成功了一半.只要发现了困扰你的东西是什么,那么你就离解答出来不远了.----肯尼斯 R. 莱伯德 一直以来,Android 开发中绕不过去的话题就是自定义 View,曾几何时,考验一个开发者能不能熟悉自定义 View 的基础流程作为分辨菜鸟和中级开发者的一个技术标准.但是自定义 View 本身而言,应对各种具体的需求,难度又不一样,这是因为牵扯到了各种各样的技术点.本文要讲解的一个技术点,正是广大开发者容易困惑的一个知识点----Sc…

JS常见问题总结

1. 什么是 JavaScript ? JavaScript 是一种具有面向对象的.解释型的.基于对象和事件驱动的.跨平台的.弱类型的程序设计语言 2. JavaScript 与 ECMAScript 的关系? ECMAScript 是规则,JavaScript 是对规则的体现 3. 变量的命名规则? 严格区分大小写,由英文.数字.下划线.$组成,推荐使用驼峰命名法,不能使用保留字和关键字,见名知意,名字不能重复 4. window.onload 的作用? 当页面加载完成后再执行 5. js 数…

js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】

之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下.   网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight  (包括边线的宽);网页正文全文宽: document.bod…

offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离最近的一个定位的父元素的上边距是60px. 这里,在控制台打印出各个高度值: var c =document.getElementsByClassName('content')[0]; console.log(c.offsetTop,c.offsetHeight,c.clientHeight,c.s…

scrollTop和offsetTop的区别，scrollTopLeft和offsetLeft的区别

scrollTop和offsetTop的区别:scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10,这个属性的值是可读写的,且不需要设置positionoffsetTop则是元素的上边框与父元素的上边框的绝对距离. scrollLeft:设置或获取对象最左端和对象内容的最左端之间的距离,这个属性的值是可读写的offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的左侧位置. 调用scrollLe…

scrollTo , scrollBy区别

View视图中scrollTo 与scrollBy这两个函数的区别 . 首先 ,我们必须明白在Android View视图是没有边界的,Canvas是没有边界的,只不过我们通过绘制特定的View时对 Canvas对象进行了一定的操作,例如 : translate(平移).clipRect(剪切)等,以便达到我们的对该Canvas对象绘制的要求 , 我们可以将这种无边界的视图称为“视图坐标”-----它不受物理屏幕限制.通常我们所理解的一个Layout布局文件只是该视 图的显示区域,超过了这个显示…

javascript中scrollTop和offsetTop的区别

scrollTop是指某个可滚动区块向下滚动的距离,offsetTop则是元素的上边框与父元素的上边框的绝对距离. 1.offsetTop   : 当前对象到其上级层顶部的距离. 不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 2.offsetLeft    : 当前对象到其上级层左边的距离. 不能对其进行赋值.设置对象到页面左部的距离请用style.left属性. 3.offsetWidth   : 与style.width属性的区别在于:如对象的宽度设定值为百分比宽度…

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offsetX 先统一了解下这四个概念,理解不透没关系,咱们把概念相近的对比着一一细说. pageX:鼠标指针距离文档X轴左侧边缘的距离,不随滚动条变化而变化 clientX:鼠标指针距离可视窗口左侧边缘的距离,随着滚动条变化而变化 screenY:鼠标指针距离屏幕的距离(包括浏览器工具栏之类),不随滚动条变化…

jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offsetTop.scrollTop 概念一直都很模糊,借此写个demo看看. 举例看看 jquery 对象的 height.innerHeight.outerHeight 几个区别: <%@ page language="java" import="java.util.*&quo…

scroll()，scrollTop()，scrollBy()无效问题的总结

· 使用的浏览器:Chrome(67.0.3396.87)/火狐(60.0.2)/IE(ie7和ie8),均为PC端. · 代码如下 表现结果: Chrome:只有第一次打开标签页面是有效的(在当前标签页不断刷新是无效的): 火狐:有效:另外,scrollBy()方法在火狐中不断刷新的同时,会不断叠加滚动值. IE:全部有效. · 有效方式 通过在定时器内定义滚动方法或者在点击事件中(ie中document.onclick是无效的)定义滚动方法都是有效的. 表现结果: 全部浏览器都可以正常滚动.…

js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight  (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen…

setOff与scrollTop区别

1.offsetTop     : 当前对象到其上级层顶部的距离. 不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 2.offsetLeft    : 当前对象到其上级层左边的距离. 不能对其进行赋值.设置对象到页面左部的距离请用style.left属性. 3.offsetWidth   : 当前对象的宽度. 与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回…

一句话解释jquery中offset、pageX, pageY、position、scrollTop, scrollLeft的区别

offset   元素相对文档的偏移 pageX, pageY 事件(鼠标)相对文档的偏移 注意:文档是指document, 而不是当前窗口,是包含了滚动位置的,即滚动条的位置对这些值是不产生影响的 position  元素相对父元素的偏移 scrollTop, scrollLeft 元素内滚动条的位置,如果元素内没有滚动条,则为0.注意:是元素内部的滚动条.…

关于平移的 scrollTo和scrollBy的区别

这几天在项目中要求一部分布局实现整体偏移的效果 在网上查了下我使用来ScrollBy(x,y)方法 他的意思是将view实现整体偏移 而ScollTo(x,y)则是将原点偏移到相应指定的位置即   移动原点; 当然两者可以实现相同的效果 在这里标注一下:原点是位于  画的不好  红色地方即是原点     在left|top处; ___________________> | | | |…

offsetTop/offsetHeight scrollTop/scrollHeight 的区别

offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offsetTop   obj距离上方或上层控件的位置,整型,单位像素. obj.offsetHeight   obj自身的高度,整型,单位像素. offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是: 一.offsetTop 返回的是数字,而 st…

JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

/*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/pageY 获取鼠标基于网页文本的坐标位置 ie8不兼容 * -- 兼容方案:clintY+页面滚动出去垂直距离 * */ /** * console.dir(element) * 元素element * offsetLeft/offsetTop 获取基于offsetParent<--当前元素的定位父…

offsetheight 和clientheight、scrollheight、scrollTop区别

clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度) offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内边距滚动条和边框大小,不包括外边距 window.screen.height:屏幕分辨率高document.body.scrollTop:网页被卷去的高 1.clientHeight clientheight=…