iScroll是一个高性能，资源占用少，无依赖，跨平台的javascript上拉加载，下拉刷新的滚动插件，目前版本v5.2.0。
看到这个标题就懵了， 你会有以下几个问题：什么是防抖？ 什么是节流？ 如何使用防抖？ 如何使用节流？ 什么时候需要用到防抖和节流？ 为什么要用防抖和节流？ 那我们就围绕这几个问题来讲一讲防抖与节流的两个概念和简单应用吧~ 我会在正文中给大家逐个解答问题
为什么要函数节流 由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。 比如以下情况： 1. window对象的resize、scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mousedown、keydown事件 4. 文字输入、自动完成的keyup事件 再详细点： 我们定义了一个鼠标滚动事件 ： 我们的本意只是让鼠标滚动一次执行一次滚动函数，但是window的onscroll函数并不是等scroll结束之后才会调用，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的浏览器也会陷入假死状态。 解决办法： 函数节流 节流就像将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期 列举代码如下：
https://www.lodashjs.com/docs/lodash.throttle
在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll发现触发的时机区分android和ios两种情况，具体可以看下面表格:
在Web开发中，利用Paper.js库进行图形的绘制和交互操作是一种常见的实践。Paper.js是一个强大的矢量图形库，可以让开发者通过简洁的API完成复杂的图形操作。在本文中，我们将详细探讨如何使用Paper.js来实现对画布的缩放和拖动功能，提供用户友好的交互体验。 （作者：CSDN@拿我格子衫来）
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做 长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、收入等)，此时对于用户的持仓列表一般是不能分页的。
大家好，上两篇文章《分享5个关于 Vue 的小知识，希望对你有所帮助（一）》和 《分享5个关于 Vue 的小知识，希望对你有所帮助（二）》，今天我们继续分享5个关于 Vue 的小知识，希望对你有所帮助。
ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。
作者：谭照强，热爱折腾前端，喜欢新奇创意的程序员，业余喜欢玩摄影，弄咖啡。 “你听说过动感影集么” 动感影集是QQ空间新功能，可以将静态的图片轻松转变为动态的视频集，且载体是HTML5（简称H5）页面，意味着可以随时分享到空间或朋友圈给好友欣赏！ 移动端区别于PC年代的相册视频，由于设备性能限制，每一个动画细节都需要认真优化，今天就来说说动感影集开发过程中的动画性能检测与优化的问题。 1.先利其器 – Chrome Timeline&Rendering 性能分析前，我们先看看工具。Chrome浏览器带
注：文章中有例子无法在微信里面展示，最好看原文。 以前写过一篇文章《“节流函数”提高性能》，里面讲到用函数“节流”来减少执行次数（不影响体验的情况下），其实实现的代码并没有问题，但是第二个方法的函数名有问题。前几天看到一篇文章，我的公众号里也分享了《一次发现underscore源码bug的经历以及对学术界拿来主义的思考》具体文章详见。 文中讲了大家对throttle和debounce存在误解，同时提到了《高程3》中实现节流方法存在一些问题，为了更好的理解这两个概念，搜了很多相关文章，详见文章底部。 thro
1、引言 最近在实现列表的滚动交互时，算是被复杂的业务场景整得怀疑人生了。今天主要聊一下关于 scroll 的应用： CSS 平滑滚动 JS 滚动方法 区分人为滚动和脚本滚动 2、CSS 平滑滚动 2.1 一行样式改善体验 在一些滚动交互比较频繁的场景，我们可以通过在可滚动容器上增加一行样式来改善用户体验。 scroll-behavior: smooth; 比如说，在文档网站里，我们常使用 # 来去定位到对应的浏览位置。 像上面这个例子，我们首先通过 # 去锚定对应内容，实现了一个 tab 切换的效果：
微信小程序中，页面的呈现方式非常多样，要使页面不只是单一的一个页面，而要实现在当前页面的自由上下滚动，且上下滚动呈现出每个不同滚动页面的形式，该怎样实现呢？
使用场景：click、onMouseOver，onMouseMove，resize，input，scroll等
“你听说过动感影集么?” 动感影集是QQ空间新功能，可以将静态的图片轻松转变为动态的视频集，且载体是HTML5（简称H5）页面，意味着可以随时分享到空间或朋友圈给好友欣赏！ 移动端区别于PC年代的相册
在写聊天页面的时候有个滚动到底部，在弹出键盘，打开表情，打开更多，发送消息等很多场景下需要重新计算底部高度和滚动到最底部的操作。导致连续调用函数来计算，导致了效率问题，页面极其卡顿。因为只关心最后一次的结果，那么可以使用防抖来解决，什么是防抖呢？
移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
CoreFlex是一个支持.NET 6,.NET 7,.NET 8的快速开发框架，也提供MasaFramework相关框架的集成提供更多功能模块, 集成了一些常用的功能模块，可以快速开发企业级应用,提供Blazor的一些JS操作工具库。
开篇 笔者刚刚结束淘宝的工作，现在加入了一家有青春活力的垂直电商公司，正对着阿里巴巴的西溪园区，最近一直在熟悉新的工作环境和规范，因此博客有好些时间没有更新了，在此抱歉！ 在忙碌完公司的发布系统之后，逐渐接触到具体的业务。在这里主要介绍下关于css3草案的position：sticky属性的兼容。 问题 目前前端的h5有个需求，就是“当页面上的若干个标题被拖动到视口的顶部时，则显示一个被定位到视口的顶部的tab标签，可对这个tab标签进行点击导航，并在某个特殊的情况下隐藏”。最简单粗暴的做法就是针对doc
在一个 Vue 项目中使用的，npm 的 swiper 插件，遇到了一些坑，记录一下填坑过程。
关于滚动的那些事，相信不少的小伙伴都知道，在做网页动态效果时，时常有需求是关于滚动效果的实现的。在360或搜狐等门户网站的首页中，我们也时常见到这种效果。
1、使用静态数据时，一切正常， Swiper 可以正常滚动和滑动。但是使用动态数据时，会出现不能自动滚动/播放甚至数据显示不正常的现象。
本文需要实现的页面如下，点击左侧导航栏按钮，右侧自动滑动到对应位置。当滑动右侧内容，左侧导航栏也要做出相应变动。
请注意，本文编写于 2082 天前，最后修改于 173 天前，其中某些信息可能已经过时。
小程序中，我们如果想实现一个绘画功能，就要先从认识canvas这个组件开始。那么先从一个简单的绘画直线功能开始介绍画布功能吧。
当我们在移动终端上滑动页面，手指离开屏幕后，页面的滚动并不会马上停止，而是在一段时间内继续保持惯性滚动，并且滑动阻尼感和持续时间与滑动手势的幅度成正比。
话说又学到移动端了,真的让我有点头疼了...真的很麻烦啊!!但是没办法,硬着头皮学吧.
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则， 也可以将一个字符串中符合规则的内容提取出来。
1 打开网页自动弹出广告效果 【需求】： 1）当页面加载完，3秒后自动显示广告； 2）广告显示5秒后，自动消失； 【分析】： 1）使用定时器setTimeout (执行一次定时器) ； 2）其实JQuery的显示和隐藏动画效果就是控制display； 3）使用 show/hide方法来完成广告的显示； 【代码实现】： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>广告的自动显示与隐藏</title> <styl
在实际开发中，我们会遇到这么一个场景：我们需要注册一个事件，但有时候这个事件会在短时间内频繁触发，事件频繁的执行会导致浏览器进行大量的计算而引发页面卡顿假死的情况，为些我们需要通过一些手段来解决这个问题，所以就有了防抖和节流这两个技术。
Hello小伙伴们，因为Ajax绕去http了几天，今天又回到了JS，今天要为大家介绍的是防抖和节流，听起来就很厉害的样子吧~想必大家在生活中也会经常干这种事情，比如在浏览一个网站的时候，要点击一个按钮，当这个点击动作没有做出反应的时候，用户便会一直不停的按，又或者再有滚动条的页面，不断上下滚动鼠标等等，都会造成不断触发事件甚至不断发送请求，为了防止这个就要采用防抖和节流的方法了。
调节器是浏览器中通过限制代码要处理的事件数量来提高性能的常用技术。当你想以受控的速率执行回调时，应该使用调节器，它允许你在每个固定的时间间隔内重复处理过渡状态。
场景需求： 在大屏幕上，消息会进行一个实时滚动播报的效果，将现有的内容进行一个来回滚动的播放~~
如果你想开发小程序，就得先学会一套微信特制的「开发语言」。 为了让大家上手这门开发语言，微信官方提供了一份十分详细的开发文档： 要是没时间通读，这里还有一份省时省力的替代品： 知晓程序（微信号 zxc
我们尽最大的努力来争取使UI组件的性能如丝般顺滑，但有的时候这根本不可能做到。要知道，Android有超过一万种不同型号的手机，而在框架底层进行软件渲染的时候是统一处理的，这意味着你没办法像iOS那样自由。不过有些时候，你还是可以想办法提升应用的性能（有的时候问题根本不是出在原生代码上！） 要想解决应用的性能问题，第一步就是搞明白在每个16毫秒的帧中，时间都去哪儿了。为此，我们会使用一个标准的Android性能分析工具systrace，不过在此之前…… 请先确定JS的开发者模式已经关闭！ 你应该在应用的日志
一、跨浏览器事件 跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除
本篇为一移动端博文,个人觉得这篇外文还可以,就翻译了一下,最终实现的一个效果是:用手势创建一个本地菜单(点击一菜单按钮,实现设置一个触摸侧滑,滑动滑出效果,如下文中的gif图所示),主要涉及的知识点有移动端三大触摸事件(touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js的方法封装点击,移动,抬起功能函数,尽管移动(手机)端与pc端有很多相似之处,但还是有很多要注意的地方的,如果你想获得该Demo的源码,复制该标题后台回复[手势魅力-设置一个触摸菜单]就可以了的,初次翻译,如果有误导的地方,欢迎路过的老师,多提意见和指正,如果你想阅读英文原文,扫文末下方二维码或者跳转到指定链接就可以了的
了解配置文件中常见配置的含义，利用事件，数据绑定，条件渲染，表达等方式实现小程序的页面交互。
在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。
从事单页相关的开发一年有余，期间无比的推崇webapp的网站模式，也整理了很多移动开发的知识点，但是现在回过头来看，webapp究竟是好还是不好真是一言难尽哟！
个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com
在前两篇文章里面分别谈了Weex如何在Native端初始化的和Weex是如何高效的渲染Native的原生UI的。Native这边还缺一块，那就是Native产生的一些事件，是怎么传回给JS的。这篇文章就详细分析这一部分。
demo： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author"
在近期的一个移动端项目中，有一个页面需要有弹框提示，并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把 tap 和 click 事件都开启了。 代码如下：
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
移动端浏览器兼容性好，我们不需要考虑以前JS的兼容问题，可以放心使用原生JS书写效果，但是移动端也有自己独特的地方，比如触屏事件touch(也叫触摸事件)，Android和IOS都有。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
