实现手机端的触屏滑动效果

实现代码如下:

HTML

    <div class="x-roll-top"><div class="x-roll"><div class="x-roll-item"><div class="circle"><img src="" alt=""></div></div><div class="x-roll-item"><div class="circle"><img src="" alt=""></div></div><div class="x-roll-item">...</div><div class="x-roll-item">...</div><div class="x-roll-item">...</div><div class="x-roll-item">...</div></div></div>

CSS
给父盒子(class=“x-roll”)设置 overflow: scroll
在父盒子外再设置一个大的父盒子,大的父盒子的高度恰好不能显示其子盒子(即class=“x-roll”)的滚动条,设置 overflow: hidden

body .x-roll-top {width: 100%;height: 110px;overflow: hidden;background-color: aliceblue;
}
body .x-roll-top .x-roll {position: relative;display: flex;flex-flow: row nowrap;align-items: center;padding: 10px 8px 20px;box-sizing: border-box;height: 120px;overflow: scroll;
}
body .x-roll-top .x-roll .x-roll-item {display: flex;flex-flow: column nowrap;align-items: center;justify-content: center;
}
body .x-roll-top .x-roll .x-roll-item .circle {width: 50px;height: 50px;border-radius: 50%;display: flex;justify-content: center;align-items: center;overflow: hidden;
}
body .x-roll-top .x-roll .x-roll-item .circle img {width: 49%;height: auto;
}

实现这个效果只需再上一个效果的基础上加入几句代码
scroll-snap- 的解释可以看我的上一篇博客:
scroll-snap- 滚动捕捉

在父元素上添加 scroll-snap-type: x mandatory
子元素上添加: scroll-snap-align: center scroll-snap-stop:always

实现手机端的触屏滑动效果相关推荐

Unity—手机端的触屏控制
参考文章: Unity 操作检测的各种实现#2手机端 - 触屏与手势一.触摸操作触发OnMouseDown()方法手势指的是,类似下划,上划一类的操作方式. 检测触屏,需要用到由MonoBehav ...
手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
手机端html5触屏事件(touch事件)3
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
c语言触屏滑动图片,jQuery手机触屏滑动的响应式图片轮播效果
插件描述:jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码. 响应式触摸滑块 Javascript/css3 滑块 HTML This is a title This ...
html5电子杂志页面案例,html5电子杂志支持手机端触屏滑动翻书效果
特效描述:html5电子杂志支持手机端触屏滑动翻书效果.html5手机电子杂志,触屏滑动电子杂志翻书动画特效代码结构 1. 引入JS 2. HTML代码 function loadApp() ...
手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效
特效描述:html5手机端叠加图片触屏滑动查看特效.html5手机叠加图片手指滑动查看代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 rutrum tellus a tempus ...
JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
python手机触屏代码_JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

实现手机端的触屏滑动效果

实现手机端的触屏滑动效果相关推荐

最新文章

热门文章