jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。
学习原生js的人一定会接触到client家族、scroll家族和offset家族。其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度,而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度,由于width和Height属性是类似的,所以这里我只挑这三个height来讲一下。
大家好,又见面了,我是你们的朋友全栈君。屏幕可见区域高(内容的可视高度,不包括边框,边距或滚动条):document.body.clientHeight 正文内容高(整个元素的高度,包括带滚动条的隐蔽的地方):document.body.scrollHeight 内容高+padding+边框:document.body.offsetHeight 滚动条已经滚动的高度:document.body.scrollTop
载入首批数据,文档高度( $('html').height() == 2500px )
浏览器当前窗口文档body的宽度: document.body.clientWidth;(仅仅是body的width) 浏览器当前窗口文档body的高度: document.body.clientHeight;(仅仅是body的height)
今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法,比较全面,方便自己和需要并搜到此文章的朋友们查看。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/156982.html原文链接:https://javaforall.cn
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
插件 https://github.com/inuyaksa/jquery.nicescroll
height、offsetheight、clientheight、scrollheight、innerheight、outerheight
原理: 图片的加载是由src引起的,当对src赋值时浏览器会请求图片资源,基于这个,可以利用html5的属性data-xxx来保存图片的路径,当我们需要加载图片的时候才将data-xxx的值赋予src。就能实现图片的按需加载了,也就是懒加载了 方法: 1.使用lazyload插件,引用jquery.js和jquery.lazyload.js 2.将img标签中的src属性赋值为加载图片,即一张临时的loading.gif图,将真正的图片路径放在data-original属性中 3.当JS监听到该图片元
还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区的显示,使用过的朋友会发现,如果对篇幅较长的内容来说,不停的拖动滚动条来查看内容,还是比较麻烦的,于是本文在上篇代码的基础上添加了滚轮事件并处理了相应的兼容问题。 本文内容 1、原理结构图 2、滚轮事件及兼容问题概要 3、具体实现步骤 4、小结 原理结构图 为了方便大家熟悉理解,希望大家能够回顾下上篇“随心所欲滚动条,远离产品汪(一)”,本文继续使用
一、懒加载 1.什么是懒加载 目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,从而节约了网络带宽和提高了初次加载的速度。 2.懒加载的原理 页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar。
一、Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用。实现根据浏览器支持transition的能力,然后绑定动画的结束事件; 首先:创建一个Element; 然后:迭代查看此元素支持的transition动画名称 Transition实现的技巧,主要是重写了jquery的event对象,代码如下: $(function () { $.support.transition = transitionEnd() if (!$.support.transition) ret
由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态。因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿。传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击下一页,才能看到更多的内容。 有很多网站使用 无限分页 的模式,即网页视窗到达内容底部就自动加载下一部分的内容... 本篇就无限分页的实现模型,讲述其中奥妙。 原理图 实现无限分页的过程大致如下: 1 视窗滚动到底部 2 触发加载,添加到现有内容的后面。 因此,可能会出现两种情况: 1 当页面的内容很
如果您使用的是jQuery,则可以使用jQuery方法获取窗口或document的大小:
本文主要针对浏览器的窗口事件做一些简要介绍,只在让读者可以入门操作bom有关的事件。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为('body').scrollTop() +(window).height() ==
如果overflow-x、overflow-y的值相同,则等同于overflow设置了这个值。
$(this).scroll(function() { // 页面发生scroll事件时触发
返回值不同,.height()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数学计算的时候
今天在做页面UI改版的时候发现,我之前使用的是dom.scrollIntoView(); 使得点击右侧题目编号的时候,让左侧题目滚动到页面可视区域。
jQuery滚动条插件兼容ie6+、手机、ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollInner").niceScroll({ touchbehavior:false, cursorcolor:"#398F70", cursoropacitymax:1, cursorwidth:5, cursorborder:
scrollTop 的最大值+(window).height()=(“html”).height(); 也就是滑到底部 后,这个scrollTop与整体页面高度相差一个屏幕高!
图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前视口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页)。
1.鼠标滚动事件。 说明:返回值 大于0向上滚动,小于0向下滚动。 兼容型:所有浏览器。 代码: /*********************** * 函数:鼠标滚动方向 * 参数:event * 返回:滚轮方向[向上(大于0)、向下(小于0)] *************************/ var scrollFunc = function(e) { var direct = 0; e = e || window.event; if (e.wheelDelta) {//
demo: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author"
window.innerHeight/window.innerWidth: 返回表示窗口的内部高度/宽度的数字。不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分
2,页面有多个div块,如何让body页面不使用滚动条,只在某个div内使用滚动条
在开发中出现一个iframe双滚动条问题,查了很多资料,网上的解决方案是定义iframe的onload事件,加载时重新加载高度,但是由于项目中页面渲染完成后,点击按钮动态生成数据,这时候上面的方案就不可行了。
我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug,后来我查看代码才发现直接用的是 offsetTop 这个属性,而且并没有做兼容性处理。
jquery获取尺寸的方法 width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。 height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
知识点:for循环语句,DOM概念,元素获取,动态布局,基本算法,节点操作,JQ与JS的关系与区别,JS的重要性,如何学习JS。 html代码: 03
最近项目中 老板需要 将聊天界面 的滚动条美化一下,所以主编海百了一波,发现一个样式和兼容性不错的滚动条插件 jQuery自定义滚动条样式插件mCustomScrollbar,基本可以满足大家的开发,官方也给出了相应的demo;大家可以看看
区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
保险起见可以把 html 和 body 的高度都设置 100% ,如下,用添加 class 的方法实现:
延迟加载 $(window).scroll(function(){ var scrollHeight = $(document).height(); //文档高度 var scrollTop = $(this).scrollTop(); //滚动条卷去高度 var windowHeight = $(this).height(); // 窗口高度 // console.log(scrollHeight, scrollTop, windowHeight) if(scrol
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。
innerWidth 获取第一个匹配元素内部区域宽度(包括内补白、不包括边框)。
经常会有返回顶部、回到底部的需求,推荐一种比较简单的写法 JQ中有 scrollTop() 方法可以帮助我们快速实现该需求
iframe框根据内容自适应高度(100%可用) HTML: <iframe id="iframe" src="自己写地址" name="content" frameborder="0" style="width: 100%;height: 100vh;"></iframe> script: <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script typ
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法。
上面几种方式实现起来比较简单,但是效果生硬,直接从底部切换到顶部,没有一个过渡的动画。此方法能使页面动态滚动,同时将按钮换成一个箭头标志,判断页面滚动的距离,当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。
//mouseover()/mouseout()和mouseenter()/mouseleave()的区别
网上也有很多锁定行列的方法,一个是使用css,另一个就是专门的控件附带有锁定的功能。css的大多数锁定行,而不能锁定列。好像看过园子里的司徒正美,写过一个用css锁定行列的,当时css比较烂看不懂,也没有保存那个网址(很后悔),现在想要找却又找不到了。 另一个就是第三方控件,这种控件很强大,锁定行列只是附带的一个小功能。但是有一个比较明显的缺点,必须使用它的控件,我想锁定GridView,那就不行了。除非你能把他的锁定方法给研究出来。 最近我在学jQuery,我觉得找个需求来学习,进步会比较快,
领取专属 10元无门槛券
手把手带您无忧上云