，设为true，则浏览器自带的滚动条会出现，页面还是按页滚动，但是浏览器滚动条默认行为也有效 // scrollBar: true, // //设置每个section顶部的padding...、导航、元素等时使用 // paddingBottom: "100px", // //固定的元素，为jquery选择器；可用于顶部导航等 // fixedElements...slidesNavigation: true, // //横向幻灯片导航的位置，可以为top或者bottom // slidesNavPosition: bottom, // //内容超过满屏时是否显示滚动条...，设为true，则浏览器自带的滚动条会出现，页面还是按页滚动，但是浏览器滚动条默认行为也有效 // scrollBar: true, // //设置每个section顶部的padding...、导航、元素等时使用 // paddingBottom: "100px", // //固定的元素，为jquery选择器；可用于顶部导航等 // fixedElements
是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 scrollOverflow (true/false)内容超过满屏后是否显示滚动条 css3 (true/false) 是否使用...moveSlideLeft() slide 向左滚动 setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动 setAllowScrolling() 添加或删除鼠标滚轮/...() 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 为序号，从1开始计算 onLeave() 滚动前的回调函数...afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink...、index、slideIndex、direction 4个参数 onSlideLeave 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex
，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等...其中以下的四个文件时必须要上传到服务器上： jquery.mCustomScrollbar.js jquery.mousewheel.min.js jquery.mCustomScrollbar.css...另外注意下 jQuery UI 这个插件被作者精简了，只包含这个插件必须的模块，大小也只有 43KB。...默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false scrollInertia:Integer：滚动的惯性值 在毫秒中 使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑) scrollEasing...");：滚动到顶部（垂直滚动条） $(selector).mCustomScrollbar("scrollTo","bottom");：滚动到底部（垂直滚动条） $(selector).mCustomScrollbar
稍微增加一点，我们将使用另一个插件ScrollTo ，以便在用户单击导航链接时提供平滑的滚动和方便的定位。 步骤1：盒子 我确定您已经熟悉HTML5引入的各种新元素 。...向下滚动时，我们将扩展其高度，并且下面的内容保持不变。 不过有一个问题-要使其正常工作，您可能希望导航栏周围的任何垂直边距都应应用于nav-container而不是nav 。 就是这样！...当元素的顶部在视口顶部下方的指定距离处时，正值触发路点；当元素的位置在视口顶部上方远处时，负值触发路径。 ）。...在某些时候，您可能已经注意到，单击导航栏中的链接会将部分的顶部置于浏览器视口的顶部。 当没有什么东西遮挡屏幕的那部分时，这是违反直觉的。 现在我们有了一个导航栏，这变得非常烦人。...它带有两个参数-滚动目标和包含不同选项的对象，在这种情况下，这很容易解释。 单击链接的href属性可以很好地用作滚动目标，并且用作顶部偏移的表达式会将目标放置在视口高度的15％处。
在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度，就能有效消除这个不良影响。...在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。...简化回到顶部 曾几何时编写一个返回顶部函数麻烦得要死，需scrollTop、定时器和条件判断三者配合才能完成。其实DOM对象里隐藏了一个很好用的函数可完成上述功能，一行核心代码就能搞定。...behavior：动画过渡效果，默认auto无，可选smooth平滑 inline：水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐 block...简化懒性加载 与上述简化回到顶部一样，编写一个懒性加载函数也同样需scrollTop、定时器和条件判断三者配合才能完成。
(即网页被卷上去的高度)(其他浏览器)：document.body.scrollTop; 获取竖直滚动条到顶部的垂直高度 (即网页被卷上去的高度)(ie浏览器): document.documentElement.scrollTop...document.documentElement.scrollLeft; 滚动条中内容的高度：boxx.scrollHeight;//利用这个可以使滚动条一直在底部 网页正文部分上： window.screenTop...： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth jQuery： 文档：是包括滚动条所有的内容 获取浏览器显示区域（可视区域...Y值） 注意clientY和pageY的区别，pageY在页面无滚动条或滚动条下拉0的情况下值等同于clientY event.offsetX 相对容器的水平坐标 event.offsetY...offsetY ： offsetY和layerY的不同在于，前者的在计算偏移值时，相对于元素的border左上角的内交点， 因此当鼠标位于元素的border上时，偏移值是一个负值
为了让ScrollView正常工作，内容视图的高度应根据其内容进行适当调整。您可以通过设置高度为"wrap_content"或固定高度，或使用权重来控制内容视图的高度。...android:scrollbars：定义滚动条的显示方式。可选值有"none"（不显示）、"vertical"（只显示垂直滚动条）和"horizontal"（只显示水平滚动条）。...android:fadeScrollbars：控制滚动条是否在不活动状态时渐隐。设置为true表示滚动条会渐隐，默认为false。...fullScroll(int direction)：使ScrollView滚动到指定的边界，参数direction可以是View.FOCUS_UP（滚动到顶部）或View.FOCUS_DOWN（滚动到底部...isSmoothScrollingEnabled()：判断平滑滚动是否启用。
获取网页的可视区宽高 //获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height(); 1.4. scrollTop与scrollLeft 设置或者获取垂直滚动条的位置...2.1. jQuery事件发展历程(了解) 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐) 简单事件注册 click(handler) 单击事件...//screenX和screenY 对应屏幕最左上角的值 //clientX和clientY 距离页面左上角的位置（忽视滚动条） //pageX和pageY 距离页面最顶部的左上角的位置...（会计算滚动条的距离） //event.keyCode 按下的键盘代码 //event.data 存储绑定事件时传递的附加数据 //event.stopPropagation()...【案例：钢琴版导航（加强）.html】 3. jQuery补充知识点 3.1. 链式编程 通常情况下，只有设置操作才能把链式编程延续下去。
在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度，就能有效消除这个不良影响。...在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。...简化回到顶部 曾几何时编写一个返回顶部函数麻烦得要死，需scrollTop、定时器和条件判断三者配合才能完成。其实DOM对象里隐藏了一个很好用的函数可完成上述功能，一行核心代码就能搞定。...「behavior」：动画过渡效果，默认auto无，可选smooth平滑 「inline」：水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐 「...简化懒性加载 与上述「简化回到顶部」一样，编写一个懒性加载函数也同样需scrollTop、定时器和条件判断三者配合才能完成。
第8章 jQuery事件机制 JavaScript中已经学习过了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。...8.1 jQuery事件发展历程(了解) 简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐) 简单事件注册 click(handler) 单击事件 mouseenter(...$(selector).on( 'click', function() {}); on注册事件委托 // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定...// screenX和screenY 对应屏幕最左上角的值 // clientX和clientY 距离页面左上角的位置（忽视滚动条） // pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离...） // event.keyCode 按下的键盘代码 // event.data 存储绑定事件时传递的附加数据 // event.stopPropagation() 阻止事件冒泡行为 // event.preventDefault
CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。...窗口缩放时自动调整。 可设置滚动宽度，背景颜色，滚动速度，循环选项，回调，文本对齐方式等。...loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling 布尔值 true 是否使用插件的滚动方式...，如果选择 false，则会出现浏览器自带的滚动条 scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条 css3 布尔值 false 是否使用 CSS3 transforms...向左滚动 setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动 setAllowScrolling() 添加或删除鼠标滚轮/触控板控制 setKeyboardScrolling
jQuery事件机制 JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。...jQuery事件发展历程(了解) 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐) 简单事件注册 click(handler) //单击事件...$(selector).on( "click", function() {}); on注册委托事件 // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件...//screenX和screenY 对应屏幕最左上角的值 //clientX和clientY 距离页面左上角的位置（忽视滚动条） //pageX和pageY 距离页面最顶部的左上角的位置...（会计算滚动条的距离） //event.keyCode 按下的键盘代码 //event.data 存储绑定事件时传递的附加数据 //event.stopPropagation
一、懒加载 1.什么是懒加载 目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片...整个网页的高度 $(window).height();//浏览器可视窗口的高度 $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移） 用一句话理解就是：当网页滚动条拉到最低端时...在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。...，若滚动条和边框为0，则和clientWidth相等) 网页可见区域高[仅针对body]： document.body.offsetHeight (包括滚动条和边框，若滚动条和边框为0，则和clientHeight...获取滚动条的滚动高度值：document.documentElement.scrollTop 获取滚动条的滚动高度值： document.body.scrollTop 获取滚动条的滚动宽度值： document.body.scrollLeft
2016-08-22 03:08:28 在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮...该方法就是利用锚点的方式来返回顶部。即给最顶部的div设置一个id，然后a标签的链接地址写成该id，当点击时就会返回顶部，但是缺点为过于突兀，因为是立即返回顶部。...来看一下代码吧： 返回顶部 上面代码当滚动条滚动到一定位置后出现该a标签，且该a标签的position...scrollTop:0},1000); return false; }); a标签的样式和方式和第一种方式相同，只不过给其添加了一个点击事件，此事件需要进入jquery.js...文件，点击之后滚动条会有一个滚动过程，不是一下子回到顶部，个人感觉不错。
我们需要知道ScrollTrigger是基于GSAP实现的插件，ScrollTrigger是处理滚动事件的，而真正处理动画是GSAP，二者组合使用才能实现滚动动画~ 插件特点 将任何动画链接到特定元素，...可以在进入/离开定义的区域或将其直接链接到滚动栏时在动画上执行操作（播放、暂停、恢复、重新启动、反转、完成、重置）。 延迟动画和滚动条之间的同步。 根据速度捕捉动画中的进度值。...在滚动记录器处于活动状态时，如将active类添加到触发元素中：toggleClass: "active" 使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。...自定义滚动触发器容器，可以定义一个 div 而不一定是浏览器视口。 高度优化以实现最大性能。 插件大约只有6.5kb大小。...start: "top top", // 当触发器的顶部碰到视口的顶部时 end: "+=500", // 在滚动 500 px后结束 scrub: 1, // 触发器
我们需要知道ScrollTrigger是基于GSAP实现的插件，ScrollTrigger是处理滚动事件的，而真正处理动画是GSAP，二者组合使用才能实现滚动动画~插件特点将任何动画链接到特定元素，以便它仅在视图中显示该元素时才执行该动画...可以在进入/离开定义的区域或将其直接链接到滚动栏时在动画上执行操作（播放、暂停、恢复、重新启动、反转、完成、重置）。延迟动画和滚动条之间的同步。根据速度捕捉动画中的进度值。...在滚动记录器处于活动状态时，如将active类添加到触发元素中：toggleClass: "active"使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。...自定义滚动触发器容器，可以定义一个 div 而不一定是浏览器视口。高度优化以实现最大性能。插件大约只有6.5kb大小。...start: "top top", // 当触发器的顶部碰到视口的顶部时 end: "+=500", // 在滚动 500 px后结束 scrub: 1, // 触发器1
，src填写的是路径，title填写的是提示文本） a 超链接（herf内容是跳转地址，当然此处有一个工作中常用的功能，那便是跳转网站新建一个标签，不用占本网站的位置，target=‘_blank’）...（超出内容才加滚动条），scroll溢出滚动（无论内容是否溢出都会加滚动条）） display 转变格式（inline行内，inline-block行内块，block块） float 浮动 上面的内容如果是哪一个忘记了具体的内容...（js中，在jQuery中是click） onmouseover鼠标滑过 onmouseout 鼠标离开 上面的内容如果哪一个单词忘记了具体的用法，可以点击链接查看具体内容：JavaScript入门 -...absolute绝对的 relative相对的 上面的内容如果大家哪个忘记了具体的用法，可以点击后面连接查看详细内容：JavaScript高级 ---- show 显示 hide 隐藏 toggle 触发 （在jQuery...hover return false 可以拒绝提交 event.defaultPrevent() 也可以拒绝提交 上面的这些单词如果哪一个忘记了具体的功能，可以点击链接查看详细的介绍：JQuery --
粘性定位 sticky 相当于相对定位 relative 和固定定位 fixed 的结合；在页面元素滚动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时；元素的相对定位 relative...这样实现固然可以，不过由于 JQuery 慢慢的退出历史的舞台，我们在代码中尽量不使用 JQuery 的 API。我们可以基于 offset().top 的源码自己处理原生 offsetTop。...也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight 也包括水平滚动条的高度； offsetTop： 元素的上外边框至 offsetParent 元素的上内边框之间的像素距离； offsetLeft...描述： 当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果 当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样 原因：在 ios 系统上不能实时监听...scroll 滚动监听事件，在滚动停止时才触发其相关的事件。
不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分 window.outerHeight/window.outerWidth： 返回表示窗口的外部高度/宽度的数字。...如下图： image.png 可以看出，假如元素在页面滚动条的拖动下向上移动，则元素的 top 会是负值。...窗口无滚动条时，该属性与 ev.clientX/ev.clientY 等价；窗口出现滚动条时，该属性的值将更大，因为它针对的是整个页面，即包含已滚动的区域。...image.png jQuery width()/height()： 无参时返回元素的 content 的宽度/高度，传参时（数字或者函数）设置元素的 content 的宽度/高度。...scrollLeft()/scrollTop()： 水平方向上或者垂直方向上，滑块相对于整个滚动条的位置。对于某个元素，滑块处于初始位置或者无滚动条时，该方法返回 0。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
