scrolltop | 易学教程

H5 jQuery 下拉到底加载下一页

阅读更多关于 H5 jQuery 下拉到底加载下一页

window . onscroll = function ( ) { //scrollTop就是触发滚轮事件时滚轮的高度 var scrollTop = document . documentElement . scrollTop || document . body . scrollTop ; //滑轮距离顶部位置 var scrollHeight = $ ( document ) . height ( ) ; //文档高度 var windowHeight = window . innerHeight ; //窗口可视高度 if ( scrollTop + windowHeight == scrollHeight ) { // 分页加载 getList ( ) } } ; 来源： CSDN 作者：谁还不是块小饼干链接： https://blog.csdn.net/qq_41654694/article/details/103710206

3分钟搞定图片懒加载

阅读更多关于 3分钟搞定图片懒加载

什么是图片懒加载图片的懒加载就是在页面打开的时候，不要一次性全部显示页面所有的图片，而是只显示当前视口内的图片，一般在移动端使用（PC端主要是前端分页或者后端分页）。为什么需要懒加载对于一个页面加载速度影响最大的因素之一就是图片资源，如果一个页面图片太多（比如某宝，某东等），整个页面的图片大小可以到达几百兆，即使在百兆宽带，全部下载的话，也需要上十秒的时间，这对于用户耐心的考验是巨大的，更别说网络差的地方了。因此，懒加载是必须要做的，对于页面未在可视区域内显示的图片先不做加载处理，只加载第一映入眼帘的图片，由于可视区域显示的图片少，加载速度就会大大提升，用户体验也会更好。而且，用户可能只翻看一两页就退出了，剩下未查看的图片也就不需要加载了。这也相当于节省了带宽资源。懒加载实现原理由于浏览器会自动对页面中的img标签的src属性发送请求并下载图片。因此，通过html5自定义属性 data-xxx 先暂存src的值，然后在需要显示的时候，再将 data-xxx 的值重新赋值到img的src属性即可。实现代码这里模拟两种情况：情况一 1、前端已经获取到所有的图片了，现在需要将这些图片以懒加载的形式展示。例子如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

scrollTop not working in Safari

阅读更多关于 scrollTop not working in Safari

问题 Firs time this is happening to me, i'm aware that scrollTop have some issues with some browsers but this time is only in Safari, Firefox and Chrome are ok. Here is my code $(window).scroll(function() { var s = $('html, body').scrollTop(); console.log(s) //ok on FF and Chrome, but Safari returns 0 } 回答1: Sadly you must check for both the <html> and <body> element separately. $(window).scroll(function() { var s = $('html').scrollTop() || $('body').scrollTop(); console.log(s); }); 来源： https:/

resize header on scroll

阅读更多关于 resize header on scroll

问题 I want to resize the header when the user scrolls and resize it again when the page is at the top. I have this example HTML <header class="header"> </header> <section> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique

How to execute a JS function when the user reaches a specific element in the page?

阅读更多关于 How to execute a JS function when the user reaches a specific element in the page?

问题 How can I automatically execute a JavaScript function when the user reaches a specific position on the page? When I scroll down to the bottom of the page, an AJAX-call shall be executed that loads more content so that you can scroll down further. Nothing should happen if the user scrolls down and then scrolls up again by the same distance. This is the call of the ajax function that I have and want to execute: refresh('refresh_status', 'refresh_status.php', '', '', '', 'refresh'); 回答1: Fixed

How to execute a JS function when the user reaches a specific element in the page?

阅读更多关于 How to execute a JS function when the user reaches a specific element in the page?

jQuery's animate() scrollTop property doesn't work on iPad Safari

阅读更多关于 jQuery's animate() scrollTop property doesn't work on iPad Safari

问题 I have a div that will show a scrollbar if it gets long. It's css is top: 35px; overflow: hidden; position: absolute; width: 100%; height: 100%; bottom: 0px; overflow-x: hidden; display: block; Somehow when I use jQuery (v1.7.1) to scroll this div, it does NOT work on iPad (iOS 8.3) Safari, but it works perfectly on all desktop browsers. This is the code $('#myDivId').animate({ scrollTop: 100 }); This plain JS code doesn't work either on iPad safari, but works fine on desktop browsers var

Calculate how much user has scrolled (incl margins & paddings)

阅读更多关于 Calculate how much user has scrolled (incl margins & paddings)

问题 I'm stuck with a very annoying problem. I'm trying to create a script that changes the menu bar (CSS) when the user has X pixels scrolled (height of header element). However, any jQuery script I've tried doesn't calculates the scrolled distance correctly. After some pixels it stops counting, and continues.. and then resumes, stops, resumes, etc. I think it may have something to do with padding and/or margins.. Anyway, I need some support. Check out the current site, with a 'distance scrolled'

chrome和IE下的滚动条样式修改

阅读更多关于 chrome和IE下的滚动条样式修改

火狐下的滚动条样式无法去修改，但chorme下的则可以任意修改，惊喜的是IE竟然是最早实现这一功能的浏览器，IE5都能有效果。 chorme下的滚动条样式修改： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*滚动条整体部分,必须要设置*/ ::-webkit-scrollbar{ width: 10px; height: 10px; background-color: #333; } /*滚动条的轨道*/ ::-webkit-scrollbar-track{ box-shadow: inset 0 0 5px rgba(0,0,0,.3); background-color: #67687D; } /*滚动条的滑块按钮*/ ::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #DE6B90; box-shadow: inset 0 0 5px #000; } /*滚动条的上下两端的按钮*/ ::-webkit-scrollbar-button{ height: 10px; background-color: #B0AEDA;

防抖函数与节流函数

阅读更多关于防抖函数与节流函数

应用场景实际工作中，我们经常性的会通过监听某些事件完成对应的需求，比如：通过监听 scroll 事件，检测滚动位置，根据滚动位置显示返回顶部按钮通过监听 resize 事件，对某些自适应页面调整DOM的渲染（通过CSS实现的自适应不再此范围内）通过监听 keyup 事件，监听文字输入并调用接口进行模糊匹配 ... 常规实现，以监听 scroll 事件为例　　我们先来看一下scroll事件的触发频率　　 window.onscroll = function () { //滚动条位置 let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 　　console.log('滚动条位置：' + scrollTop); } 效果如下：从效果上，我们可以看到，在页面滚动的时候，会在短时间内触发多次绑定事件。我们知道DOM操作是很耗费性能的，如果在监听中，做了一些DOM操作，那无疑会给浏览器造成大量性能损失。下面我们进入主题，一起来探究，如何对此进行优化。函数防抖定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。 var timer;

订阅 scrolltop