首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

页面滑动流畅得飞起的新特性:Passive Event Listeners

在不久前的Google I/O 2016 Mobile Web Talk中,Google公布了一个页面滑动更流畅的新特性Passive Event Listeners。...Passive Event Listeners特性是为了提高页面滑动流畅度而设计的,页面滑动流畅度的提升,直接影响到用户对这个页面最直观的感受。...,以便浏览器更好地做决策来提高页面滑动流畅度。...这种场景下,用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而用户感觉到页面卡顿。 ?...如果能让Web开发者来明确告诉浏览器,监听器内部不会调用preventDefault函数来禁止默认的事件行为,那么浏览器将能快速生成手势输入事件,从而页面响应更快。

1.4K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    页面滑动流畅得飞起的新特性:Passive Event Listeners

    在不久前的Google I/O 2016 Mobile Web Talk中,Google公布了一个页面滑动更流畅的新特性Passive Event Listeners。...Passive Event Listeners特性是为了提高页面滑动流畅度而设计的,页面滑动流畅度的提升,直接影响到用户对这个页面最直观的感受。...,以便浏览器更好地做决策来提高页面滑动流畅度。...这种场景下,用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而用户感觉到页面卡顿。...如果能让Web开发者来明确告诉浏览器,监听器内部不会调用preventDefault函数来禁止默认的事件行为,那么浏览器将能快速生成手势输入事件,从而页面响应更快。

    9.1K00

    禁止遮罩下页面滑动

    最近在业务中遇见一个问题,就是弹出一个蒙版,覆盖整个页面,有一部分内容固定在底部。可是底部内容还是能滑动。 我相信在蛮多场景下是需要做到蒙版的时候底部禁止滑动。尤其是手机端。...content.addEventListener('touchmove', function (e) { e.preventDefault(); }, false) 这两个都是禁止touch事件,在移动端有效,在PC端用滚轮滑动就禁止不了...还有要注意,新版chrome在PC模式下可以,手机模式下会报错,要声明阻止滑动不是被动的: var content = document.getElementsByTagName('body')[0];...在这边要分享一件事,就是在微信下,当你滑动的时候,透过遮罩触发了body,那么微信默认进行一个进程一样,得等一下才能滑动遮罩上面的元素。暂时没有优化的方法,当然,遮罩没有透明度不会出现。 (完)

    2.1K30

    Axure原型设计丨页面滑动效果

    (3)动态面板的state1内拖入的矩形(我用图片代替)命名为“滑动图片”,动态面板命名为“滑动面板”。 设置交互样式 (1)单击“滑动面板”,设置“右侧工具栏属性——拖动时”交互。...点击确定,设置完成后交互显示如下: 此时已经设置好case1,此处是滑动页面与顶部的交互,滑动页面在离开顶部范围后能自动滑回顶部。...点击确定,设置完成后交互显示如下: 此时已经设置好case2,此处是滑动页面与底部的交互,滑动页面在离开底部范围后能自动滑回底部。...以上就设置完成啦,最终的“滑动面板”设置交互样式如下: 小白问答: 问题:如果里面的滑动图片有自己独立交互怎么办?...答案:为了页面滑动后返回的效果更加柔和,移动时间可以根据需要调节哦。

    2K00

    使用 Axure RP 8 进行滑动页面设计

    Axure RP 是美国 Axure Software Solution 公司旗舰产品,是一个专业的快速原型设计工具,负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、...以下简称 Axure: 今天我们就来介绍一下如何使用 Axure 进行滑动页面的设计。滑动页面分为两种,分别是垂直滑动和水平滑动;垂直滑动就是上下滑动;水平滑动就是左右滑动。...在线演示地址:https://pe6n3i.axshare.com ---- 首先我们需要明白一个道理,我们之所以需要滑动页面来获取信息,是因为手机本来的大小不足以让我们看到所有的内容;假设我们手机大小为一级页面...,所以我们在做原型的时候需要将内容都放到二级页面上,以及页面只是控制显示大小的。 一、垂直滑动 垂直滑动需要两个动态面板,为了区分方便,我们将其命名为一级页面和二级页面。...只需要给一级页面添加交互,二级不需要,到此就实现了垂直滑动。 二、水平滑动 ? 所以我们新建动态面板,手机展示的内容为一级面板。 首先拖入一个一级动态面板 375*600 ,命名为一级页面

    1.9K10
    领券