关于top.clientTop.scrollTop.offsetTop的用法 网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight  (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: docu…

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

近期想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结例如以下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法非常迷糊,花了一天的时间好好的学习了一下．得出了下面的结果:1.offsetTop     :当前对象到其上级层顶部的距离.不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 2.offsetLeft    :当前对象到其上级层左边的距离.不能对其进行赋值.设置对象到页面左部的距离请用s…

最近写组件,这两个属性的结果搞的有点晕,我检查的文件及资料,这两个性质如下面总结: 他一直在offsetLeft.offsetTop,scrollLeft.scrollTop这些方法都是非常迷茫,花一天的时间学习好．将得到的结果如下:1.offsetTop     :当前对象到其上级层顶部的距离.不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 2.offsetLeft    :当前对象到其上级层左边的距离.不能对其进行赋值.设置对象到页面左部的距离请用style.left…

源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo的scrollTop或者scrollLeft达到滚动的目的,当demo1与demo2的交界处滚动至demo顶端时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的. 代码如下:  <DIV id=demo…

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

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

一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight offsetWidth 三.可视距离.宽高 clientTop clientLeft clientHeight clientWidth 四.坐标 event.clientX event.clientY event.pageX event.pageY event.offsetX event.offse…

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

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

clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素. offsetHeight:包括padding.border.水平滚动条,但不包括margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素 当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时: scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样…

每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别.通过阅读它们的文档总结出规律如下: clientHeight: 元素可视区域的高度,滚动条.border.margin不算在内,padding算在内 clientHeight = topPadding + bottomPadding + height - 水平滚动条高度…

在开发中常见的额兼容性问题: scrollTop问题: function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset != null) { // ie9+ 高版本浏览器 // 因为 window.pageYOffset 默认的是 0 所以这里需要判断 return { left: window.pageXOffset, top: window.pageYOffset } }else if(document.compatMode ===…

mounted() { window.addEventListener("scroll", this.handleScroll); }, beforeDestroy() { window.removeEventListener("scroll",this.handleScroll) }, handleScroll() { var scrollTop = document.documentElement.scrollTop || document.body.scrol…

文档坐标和视口坐标 视口坐标是相对于窗口的坐标,而文档坐标是相对于整个文档而言.例如,在文档坐标中如果一个元素的相对于文档的Y坐标是200px,并且用户已经把浏览器向下滚动了75px,那么视口坐标中元素的Y坐标为200px – 75px = 125px.    如何获取浏览器滚动条的位置?Window对象的pageXOffset和pageYOffset属性在所有浏览器中提供这些值,除IE8以及更早的版本.IE和所有现代浏览器也可以通过scrollLeft和scrollTop属性获取滚动条位置.…

  在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clien…

最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的不好或者写错了,欢迎各位指正.好了废话不多说,开始进入主题. 这篇文章主要讨论两点: 一.DOM中各种宽度.高度 二.DOM中的坐标系 下面我们看看DOM中都有一些什么宽度.高度. 常见的 offsetWidth clientWidth scrollWidth offsetHeight client…

JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scroll…

我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientLeft scrollLeft offsetTop clientTop scrollTop 为了理解这些属性,我们需要知道HTML元素的实际内容有可能比分配用来容纳内容的盒子更大,因此可能会出现滚动条,内容区域是视口,当实际内容比视口大的时候,需要把元素的滚动…

公司眼下的项目中的右側导航菜单用到了bootstrap(v3.2.0)的affix.js(Affix插件)与scrospy.js(滚动监听)插件, 须要用到版本号>= 1.9.0的jquery,眼下最新的jquery版本号是2.1.1.公司之前用的jquery版本号是1.6.2的,怎样在同一个站点里应用不同版本号的jquery而不引起冲突呢?在网上查了资料找到可解决的方法. <!-- 载入jQuery1.6.2版本号--> <script type="text/javas…

1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.handleScroll) } methods: { handleScroll () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop console.l…

vue 锚点定位 <template> <div class="details"> <div class="wrapper w"> <div class="benefit"> <div class="benfit-left"> //这个是页签 <div class="benefit-cell" ref="searchBar"…

{#portal.html#} {## ————————46PerfectCRM实现登陆后页面才能访问————————#} {#{% extends 'king_admin/table_index.html' %}#} {#{% block right-container-content %}#} {#<div class="container col-lg-offset-3">#} {# <h2><a class="form-signin-he…

图片另存为  16*16  名字修改为      bpm_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under the MIT license */ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScri…

图片另存为  16*16  名字修改为      global_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under the MIT license */ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaS…

/*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under the MIT license */ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery') } +function ($) {…

组件化思想,包含: 下拉菜单项封装 + 按需加载 搜索功能组件化,显示数据 + 下拉显示 + 缓存 分类导航按需加载 幻灯片效果组件封装及按需加载 商品楼层模块组件化 + 商品数据按需加载 + Tab选项卡 + 电梯结构 是时候放出大长图了!!! index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title&…

<template> <div class="main"> <div class="content">灰色部分是内容部分</div> <div class="red">红色部分是内容部分</div> <div class="scollTop" id="imgscoll" v-show="isShowimg === tru…

1.HTML <div id="searchBar"><ul class="items_filter" :class="searchBarFixed == true ? 'isFixed' :''"><li><span class="all">综合</span></li><li><span class="all">…

1.offsetTop: obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置. 2.clientTop: 这个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 3.scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (即网页被卷去的高) 如果元素是可以滚动的,可以通过这俩个属性得到元素在垂直方向上滚动了多远,单位是象素. 对于不可以滚动的元素,这些值总是0.…