设为首页 - 加入收藏
广告 1000x90
您的当前位置:黄大仙78345救世报网 > 局部失效 > 正文

移动端 - 局部滚动

来源:未知 编辑:admin 时间:2019-07-07

  使对话内容一句一句显示,脑子里立马闪现出setInterval定时器。

  对话内容超过一屏,使对话内容上移,当然是改变父元素的scrollTop值啦

  用户可以上下滑动对话框,就类似于滚动条效果,设置父元素高度并且 overflow:hidden,子元素高度auto即可。

  局部滚动效果,以上想法(设置父元素高度并且 overflow:hidden)在PC端可以正常滑动,但在移动端失效。

  但是,我司的H5页面使用的swiper制作,大概是这个有一些影响,用户滑动屏幕首先触发了swiper的事件。(仅做设想,后续做进一步实践)

  了解了这两个事件,我们可以在用户触发touchstart事件时,记录手指位置,在touchmove记录获取手指最后停留的位置

  (pageY-startY)为正数时,说明用户向下滑动;为负数时,说明用户向上滑动。

  网上有很多关于iscroll的资料,但是我查了一下官方的github,最近的更新在5年前,果断不敢用~

  查了一番,swiper里的swiper-scrollbar可以完美的实现这一功能,单独写这一功能,在真机测试没有问题。然后移入到我们的项目中。出现以下几个问题

  出现这个问题的原因,是由于我司的H5项目也是由swiper制作,这意味着每一屏就相当于一个slide,当添加用swiper完成的局部滚动时,会造成后面父元素的slide元素不显示。

  当页面存在多个swiper,初始化时,尽量避免使用一样的类名,如 .swiper-container,每个swiper有它单独的类名

  将子元素的初始化,写在父元素初始化之前,加载时,优先初始化子元素swiper

  swiper默认给当前的slide添加swiper-slide-active类名。当页面中存在swiper嵌套时,父元素的当前slide会添加该类名,子元素的当前slide也会添加该类名。

  这样当用户滑出父元素的当前slide时父元素的swiper-slide-active被移除,而子元素的swiper-slide-active类名并没有移除,造成swiper混乱,所以父元素后续slide的元素会无法显示

  我的做法是在父元素切换slide后,判断页面中swiper-slide-active的个数,如果存在一个以上,则说明子元素的类名没有移除。

  transform咋样,我准备用这个试试,用他人开发的框架总感觉不好把握(文档不更新,没法操作)

  每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。

本文链接:http://sesdagreat.com/jubushixiao/375.html

相关推荐:

网友评论:

栏目分类

现金彩票 联系QQ:24498872301 邮箱:24498872301@qq.com

Copyright © 2002-2011 DEDECMS. 现金彩票 版权所有 Power by DedeCms

Top