前端 scrollTop scrollLeft

2024-11-04

javascript中元素的scrollLeft和scrollTop属性说明

再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidden,auto,scroll的之中,但是hidden最常见. 注意:在对这两个参数设置值时,直接用数字就可以了,否者不起作用. javascript中元素的scrollLeft和scrollTop属性的参数意义: scrollLeft:是该元素的显示(可见)的内容与该元素实际的内容的距离. 即设置s

offset() position() scrollTop() scrollLeft()

(1)offset:获取当前元素相对于文档的高度.只对可见元素有效. 不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移 (2) position:获取元素相对于最近的一个position为relative or absolute的元素的祖父节点的相对偏移. 事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置,如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏

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

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

jQuery css,position,offset,scrollTop,scrollLeft用法

jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://&quo

JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度(content+padding+border) offsetHeight:返回元素的高度(content+padding+border) 2. offsetTop / offsetLeft(相对于父级的偏移量) 类似于子绝父相定位中的top和left,都是相对于有定位父级的偏移距离. offset

scrollTop,scrollLeft

document.body.scrollTop用法网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.s

一文看懂js中元素的滚动大小（scrollWidth,scrollHeight,scrollTop,scrollLeft）

滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. scrollHeight:在没有滚动条的情况下,元素内容的总高度. 3. scrollTop:被隐藏在内容区域左侧的像素数.设置该值可以改变元素的滚动位置. 4. scrollLeft:被隐藏在内容区域上方的像素数.设置该值可以改变元素的滚动位置. 接下来就举例讲解一下各个属性是什么意思,在这里使

前端之jquery

前端之jquery 本节内容 jquery简介选择器和筛选器操作元素示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏

前端性能优化--为什么DOM操作慢？

作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部,脚本放底部使用CDN(这部分,不少前端都不用考虑,负责发布的兄弟可能会负责搞好) 缓存…… 等等…… 有兴趣的同学,可以自行搜索雅虎关于前端优化的十四条规则.但这些规则当中,有多少是需要前端工程师付诸实践的?就我来说,CDN.缓存的设置,就是不需要我去关心的(作为一个苦逼外包,是没有权限去生产环

第四篇：web之前端之jquery

前端之jquery 前端之jquery 本节内容 jquery简介选择器和筛选器操作元素示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼

【前端】:jQuery下

前言: 接上一篇博客: [前端]:jQuery上一.jQuery属性操作 ① attr(设置或返回自定义属性值) input.select.textarea框中的内容, 可以通过attr来获取,但是如果你在input输入框中输入新的值,用attr是取不到input框新输入的值的!! 此时取到的仍是原来input框的文本内容(value). 请看下面的例子: <input id="i1" type="text" checked="checked&qu

Web前端总结（小伙伴的）

以下总结是我工作室的小伙伴的心得,可以参考一下 html+css知识点总结 HTMl+CSS知识点收集 1.letter-spacing和word-spacing的区别 letter-spacing:指字母间距 word-spacing:指单词间距 2.列举常见的复合属性(常见的17种,有可能结合js问): Background,Font,Border,Padding,Margin,list-style 3.img标签的属性alt和title的区别 Alt:图片加载不了的时候用以替代图片信息,同

Web前端JQuery入门实战案例

前端jquery入门到实战为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset = "UTF-8"> <title>dashu</title> <style> div { height: 100px; background-color: yellow; } </style

前端开发 - JQuery&Bootstrap - 总结

一.JavaScript和Jquery的区别 1.javascript的缺点: 1.书写繁琐,代码量大 2.代码复杂 3.动画效果,很难实现.使用定时器各种操作和处理 2.定义: 1.Javascript是一门编程语言,我们用它来编写客户端浏览器脚本. 2.jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发 3.jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到注意:一般情况下,是库

前端性能优化--为什么DOM操作慢？浅谈DOM的操作以及性能优化问题-重绘重排为什么要减少DOM操作为什么要减少操作DOM

前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部,脚本放底部使用CDN(这部分,不少前端都不用考虑,负责发布的兄弟可能会负责搞好) 缓存…… 等等…… 有兴趣的同学,可以自行搜索雅虎关于前端优化的十四条规则.但这些规则当中,有多少是需要前端工程师付诸实践的?就我来说,CDN.缓存的设置,就是不需要我去关

【前端】之JavaScript基础知识

JS 基础知识 JS中,简单类型的数据存储在栈中,复杂类型的数据存储在堆中,其引用存储在栈中 JS中的深拷贝和浅拷贝: 浅拷贝:将对象中的所有简单类型的属性拷贝出来,引用类型属性直接赋值null 深拷贝:将对象中的所有属性都拷贝出来,引用类型属性对象中的属性一一拷贝 JS类型检测方法: typeof 100:number/string/boolean/undefined/object/function 100 instanceof Number:true/false Object.prototy

记录一下前端性能优化-为何操作DOM会变慢？

对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部,脚本放底部使用CDN(这部分,不少前端都不用考虑,负责发布的兄弟可能会负责搞好) 缓存…… 不仅要避免去操作DOM,还要减少去访问DOM的次数. 在浏览器中,DOM和JS的实现,用的并不是同一个“东西”.比如说,我们最熟悉的chrome,JS引擎是V8,而DOM和渲染,靠的是WebCore库.也就是说,DOM和JS是两个独立的个

前端Web APIs 二

day04 - Web APIs 学习目标: 能够说出常用的3-5个键盘事件能够知道如何获取当前键盘按下的是哪个键能够知道浏览器的顶级对象window 能够使用window.onload事件能够使用window.onresize事件能够说出两种定时器的区别能够使用location对象的href属性完成页面之间的跳转能够使用location对象获取url中的参数部分能够使用history提供的方法实现页面刷新 1.1. 常用的键盘事件 1.1.1 键盘事件 <script>

JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提示或是将某些重要信息或按钮显示出来.实现这些效果的关键是要区分clientHeight.scrollHeight.offsetHeight等属性的区别.刚好最近项目中有用到过这些概念,今天就抽空整理下关于这几个属性的区别. 1.概念 clientHeight/clientWidth 指元素可见区域的

搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

先搞offsetTop,最难懂的就是它了官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最近的具有绝对或相对定位的父级元素的距离,有点绕口是不是?别急,咱慢慢剥开它...首先一定要明白offsetTop是一个相对值,那它到底是相对于谁的值呢,现在的女明星不都流行找干爹嘛,offsetTop也给自己找了一个,别人的要求是要有钱有权,而它的要求是要有position(只能是relative和

web前端 DOM 详解

先来点概念文档对象模型(DOM)是一个独立于语言的,使用 XML 和 HTML 文档操作的应用程序接口(API). 在浏览器中,主要与 HTML 文档打交道,在网页应用中检索 XML 文档也很常见.DOM APIs 主要用于访问这些文档中的数据. 尽管 DOM 是与语言无关的 API,在浏览器中的接口却是以 JavaScript 实现的.客户端大多数脚本程序与文档打交道,DOM 就成为 JavaScript 代码日常行为中重要的组成部分. 浏览器通常要求 DOM 实现和 JavaScript

前端 scrollTop scrollLeft

热门专题