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

移动滚动研究

移动web滚动问题 在移动如果使用局部滚动,意思就是我们的滚动在一个固定宽高的div内触发,将该div设置成overflow:scroll/auto;来形成div内部的滚动,这时我们监听div的onscroll...方案比较 第一种方案由于惯性滚动的时机时由js自己控制所以可以拿到滚动触发阶段的scrolltop值,并且滚动的回调函数onscroll在滚动的阶段都会触发。...在使用模拟滚动时,浏览器在js层面会消耗更多的性能去改变dom元素的位置,在dom复杂层级深的页面更为高,所以在长列表滚动时还要使用正常滚动更好。...节流(Throttling) 防抖函数确实不错,但是也存在问题,譬如图片的懒加载,我希望在下滑过程中图片不断的被加载出来,而不是只有当我停止下滑时候,图片才被加载出来。...使用rAF(requestAnimationFrame)触发滚动事件 如果页面只需要兼容高版本浏览器或应用在移动,又或者页面需要追求高精度的效果,那么可以使用浏览器的原生方法 rAF(requestAnimationFrame

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

    js - 移动的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。

    背景: 弹层里边有可滚动区域时,在移动的坑我就不多说了。 找了很多解决滚动穿透的方案,最终都不能完美解决。 一气之下自己js撸了一个。 效果图: ?...原理: 1、解决滚动穿透:通过给弹层绑定touchmove和mousewheel事件,取消默认行为实现。...2、取消默认行为后不能滚动:给需要滚动展示的区域绑定touchstart、touchmove和mousewheel事件,监听触发区域的Y值,对应修改可滚动区域的translateY值,实现滚动效果。...touchToBottom(params.scroll, params.bar); 117 } 118 }); 119 } 120 完整demo见github: 移动超出滚动效果...声明:   请尊重博客园原创精神,转载或使用图片请注明:   博主:xing.org1^   出处:http://www.cnblogs.com/padding1015/

    7.2K10

    web移动:touchmove实现局部滚动

    总结一下最近项目用到的一个功能点,具体要求如下: body中会呈现一个可滚动的长页面,在点击某个按钮的时候,会出现一个弹出框,由于弹出框的内容较长,会出现滚动条,但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件... 管理 三.js...touchmove事件的要点主要是移动方向的判断和滑动边界的判断 移动方向的判断 var replyListTop=parseInt($(".replyList").css("top")...true:false B.向下滑动到下边界 由于滚动区域是包裹在replyContainer里面的,所以滚动区域的初始top值为标题区域的高度,只要标题区域的高度 == 滚动区域的top值...replyListTop : 3.2*fontHeight; } js完整代码 function replyCengShow(){ var startX; var startY

    1.4K20

    移动框架 滚动类 iScroll5

    HTML5学堂:移动开发中,经常遇到需要模拟APP的效果header或是footer固定住,里面的内容区域实现滚动。但是对低端手机单纯使用CSS是兼容不了,需要JavaScript的支持。...本文讲解了使用iScroll5的使用方法,解决了固定高度的容器内滚动内容。...iscroll诞生的意义 之所以iscroll会诞生,主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容...如果希望ul中的内容发生滚动,需要在外层添加一层,同时将iScroll的功能添加到最外层上。...scrollToElement(el, time, offsetX, offsetY, easing) 滚动到某个元素 offsetx和offsety定义像素偏移,这样你可以滚动到元素加上一个指定的偏移量

    1.2K90

    从 antDesign 来窥探移动滚动穿透”行为

    比如上方图片中有两个元素,一个为红色边框存在滚动条的父元素,另一个则为蓝色边框黑色背景不存在滚动条的子元素。 当我们拖动不可滚动的子元素时,实际会意外造成父元素会跟随滚动。...在移动,我们完全可以使用一种通用的解决方案来解决上述造成“滚动穿透”意外行为: 无论元素是否可以滚动时,每次元素的拖拽事件触发时我们只需要进行判断: 寻找当前触发 touchMove 事件 event.target...通用 Hook 方案 useTouch 拖动位置 首先,我们先来看一个有关于移动滚动的简单 Hook: import { useRef } from 'react' const MIN_DISTANCE...上述的代码仍然是按照我们在文章开头讲述的解决思路来解决移动滚动链接的意外行为。...为 body 添加 overflow:hidden 其实在移动并没什么太大的实际作用,我们 touchmove 事件中的处理逻辑对于阻止意外滚动行为的发生已经完全足够了。

    47020

    【总结】1823- 移动滚动穿透与滚动溢出解决方案

    滚动穿透 问题描述 在移动 WEB 开发的时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时,在 fixed 定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起滚动,看起来好像事件穿透到下面的...问题原因 能够猜想是文档(document)的滚动事件被触发了,如果能禁用滚动事件就好办了。...问题描述 如上录屏所示,弹窗内也含有滚动元素,在滚动元素滚到底部或顶部时,再往下或往上滚动,也会触发页面的滚动,这种现象称之为滚动链(scroll chaining), 但是感觉滚动溢出(overscroll...值 描述 auto 默认效果,元素的滚动可以传播到祖先元素。 contain 阻止滚动链,滚动不会传播到祖先元素,但是会显示节点自身的局部效果。...,从而页面滚动也不会触发了,而在滚动之间则不做处理。

    53411

    js实现单张或多张图片持续无缝滚动

    背景: 想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符...原理: 图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接,前提:1、必须是没有设置过渡动画的...,2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。...实现: html主要包含三块: 1、最外层盒子,用来展示滚动图的区域,overflow:hidden; 2、滚动的盒子,主要改变该盒子的定位值,来实现滚动,里面包含所有要滚动图片或文字 3、包含图片或文字的盒子...代码: class Roll { constructor(opts) { this.elem = opts.elem; // 图片包含滚动长度的元素的 this.elemBox

    7.6K10

    移动对齐 + 图片宽度自适应

    下面是正经的一种写法: 图片单元float,宽度设置为50%,奇数单元设置margin-right为10px, 偶数单元设置margin-right为-10px。...父元素设置左padding为4px,右padding为14px,父元素的padding值正好是所有间距的总和,所以它实际宽度的50%是正好符合需求的图片单元宽度。...偶数单元的负margin(-10px)和父元素右padding(14px)会中和成4px的右边距(实际上是因为元素负margin会使其右边的元素向左移动并被其覆盖) 运营的同学在实际操作中,做的图可能不会很标准...,所以我们需要做一些简单地容错,即是图片垂直居中在图片单元内,图片单元设置padding-top为一个百分比,这个百分比为设计稿中图片的宽高比。...这样即使图片有些误差也不会影响总体的排版布局,垂直居中的原理是 top 百分比的基数是父元素 translate百分比的基数是元素本身。

    1.5K40
    领券