H5页面,上下滑动翻页

针对之前的版本:
https://blog.csdn.net/qq_16494241/article/details/78095575
进行了升级修改:
改用原生JS编写,之前的基于JQ
可设置页面内容元素内部滚动及滚动至顶部或最底部触发翻页效果
PC端模式也可鼠标滑动翻页(元素内部滚动需使用滚轮)

方法:
setChangePage(element,isLoop,needScrollClass)
参数:
element 作用区域(所有执行翻页页面的父级元素DOM)
isLoop 是否循环执行翻页,第一页下滑动时进入最后一页,最后一页向上滑动时进入第一页
needScrollClass 执行翻页页面内部可滚动元素样式名

例:
循环执行翻页:
setChangePage(document.getElementsByClassName('page_box')[0],'loop','scroll_box');
不循环执行翻页:
setChangePage(document.getElementsByClassName('page_box')[0],'','scroll_box');


仅支持移动端上下滑动翻页demo:














仅支持移动端上下滑动翻页


 

 
标题标题标题标题

行内滚动内容行内滚动内容行内滚动内容行内滚行内滚动内容行内滚动内容动内容行

行内滚动内容行内滚动内容行内滚动内容行内滚行内滚动内容行内滚动内容动内容行

行内滚动内容行内滚动内容行内滚动内容行内行内滚动内容行内滚动内容滚动内容行

行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行

行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行

行内滚动内容行内滚动内容行内滚动内容行行内滚动内容行内滚动内容内滚动内容行

行内滚动内容行内滚动内容行内滚动内容行内行内滚动内容行内滚动内容滚动内容行

行内滚动内容行内滚动内容行内滚动内容行内行内滚动内容行内滚动内容滚动内容行

22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
33333333333
33333333333
33333333333
33333333333
33333333333
33333333333
33333333333
33333333333
33333333333
33333333333

支持PC、移动端上下滑动翻页demo:














支持PC、移动端上下滑动翻页


 

 
标题标题标题标题

行内滚动内容行内滚动内容行内滚动内容行内滚行内滚动内容行内滚动内容动内容行

行内滚动内容行内滚动内容行内滚动内容行内滚行内滚动内容行内滚动内容动内容行

行内滚动内容行内滚动内容行内滚动内容行内行内滚动内容行内滚动内容滚动内容行

行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行

行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行

行内滚动内容行内滚动内容行内滚动内容行行内滚动内容行内滚动内容内滚动内容行

行内滚动内容行内滚动内容行内滚动内容行内行内滚动内容行内滚动内容滚动内容行

行内滚动内容行内滚动内容行内滚动内容行内行内滚动内容行内滚动内容滚动内容行

22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
22222222222
33333333333
33333333333
33333333333
33333333333
33333333333
33333333333
33333333333
33333333333
33333333333
33333333333

你可能感兴趣的:(javascript,前端)