我是小渔歌,点击右上方“关注”,每天为你分享【前端技术知识】干货。
大家看下这个gif动态图上的拖拽效果,用CSS可以实现吗?
这个时完全可以用CSS实现的,说了大家可能不信,话不多说,下面就带大家一步一步实现这个拖拽功能。
CSS实现原理
在网页开发中,几乎每天都和页面滚动打招呼,在PC端中页面超过盒子高度,即可使用鼠标滚轮进行页面的滚动,而在移动端是通过手指滑动进行页面滚动。 同时开启水平垂直方向的滚动,设置overflow:auto,大家猜猜会发生什么?
当子元素超出父元素才会出现滚动条。
这时,在PC端垂直方向上可以通过鼠标滚轮滚动,水平方向上则是通过shift健加鼠标滚轮,只能同时滚动一个方向。
但是移动端就不一样了,他可以通过手指滑动任意方向滚动(拖动)。
基于这个就能实现上面的拖拽功能,是不是很神奇。
下面来说下实现所需的元素盒子布局:
container:外层盒子,设置overflow:auto。
dragContainer:宽高大于外层container的宽高,这样才会出现滚动。
content:网页内容区域。
dragBtn:一个用于拖拽交互的button。
完整结构代码
class="container"> <div class="dragContainer"> <div class="LR"> <div class="L"> L div> <div class="R"> R div> div> <div class="content"> div> <div class="dragBtn"> div> div> div>
实现元素层级图
dragContainer 的宽高是container的2倍,这样dragContainer整个在移动端就可以拖动了。
主要样式代码
.container { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; overflow: auto; } .dragContainer { width: 200%; height: 200%; }
然后在加上dragBtn按钮
注意:此时的dragContainer的宽高要减去dragBtn的宽高,以达到按钮一直在可视区域的效果。
主要样式代码
.container { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; overflow: auto; } .dragContainer { width: calc(200% - 50px); height: calc(200% - 50px); } .dragBtn { width: 50px; height: 50px; border-radius: 50%; background: #FFD966; position: absolute; right: 0; bottom: 0; }
哈哈,此时是不是有点那个意思了。
不过此时拖动非按钮区域,按钮也跟着动。现在我们要实现只拖动dragBtn按钮才动
此刻我们把content固定。
注意:content的层级应该在dragBtn与dragContainer之间。
主要样式代码
.content { width: 100vw; height: 100vh; overflow: auto; position: fixed; left: 0; top: 0; }
哈哈,是不是很完美,不过我们还差一步,按钮的边缘吸附效果,
按钮边缘吸附效果实现
那怎么样实现吸附效果呢?
大家可以思考下,CSS有什么属性可以做到。
主要用到scroll-snap-type: x mandatory与scroll-snap-align: start这两个属性。
我之前有一篇文章提起过这个CSS属性,感兴趣的可以看下,链接在下方
能用CSS实现的效果,就尽量把Javascript踢开吧?
主要样式代码
.container { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; overflow: auto; scroll-snap-type: x mandatory; } .LR { display: flex; width: 100%; height: 100%; } .L { background: rgba(255, 0, 0, 0.1); } .L, .R { flex-grow: 1; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; }
这里我们给L加了歌背景半透明的颜色,这样看起来更清晰点。
完整样式代码
* { padding: 0; } body { overflow: hidden; } .container { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; overflow: auto; scroll-snap-type: x mandatory; } .dragContainer { width: calc(200% - 50px); height: calc(200% - 50px); } .LR { display: flex; width: 100%; height: 100%; } .L { background: rgba(255, 0, 0, 0.1); } .L, .R { flex-grow: 1; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; } .dragBtn { width: 50px; height: 50px; border-radius: 50%; background: #FFD966; position: absolute; right: 0; bottom: 0; } .container::-webkit-scrollbar { width: 0 !important } .content { width: 100vw; height: 100vh; overflow: auto; position: fixed; left: 0; top: 0; } .item { height: 80px; font-size: 20px; border: 1px solid #333333; border-radius: 10px; display: flex; align-items: center; padding: 0 20px; font-weight: bold; font-family: "仿宋" }
最终实现效果图
总结
主要是利用移动端水平和垂直方向超出区域可以随意拖动的原理,按钮吸附效果是借助CSS3的scroll-snap-type: x mandatory与scroll-snap-align: start这两个属性实现的。
往期精彩内容
能用CSS实现的效果,就尽量把Javascript踢开吧?
在JavaScript中call与apply的实际应用你知道多少?
作者介绍
小渔歌,90后前端研发工程师,热爱生活,一个在劳动中不断学习的人,愿我们共同进步,点关注不迷路
CSS实现拖拽功能,你是认真的吗?
我是小渔歌,点击右上方“关注”,每天为你分享【前端技术知识】干货。大家看下这个gif动态图上的拖拽效果,用CSS可以实现吗?这个时完全可以用CS
无需 JavaScript 即可创建强大的 CSS 动画效果
在本文中,我们将探索仅使用 CSS 的 Web 动画世界。我们将首先使用 SVG 和 CSS 的组合创建一个简单的动画。然后,我们将只使用 HT
前端框架和库的区别,对比Vue和JQuery,一分钟了解
这两年转项目管理了,很久没写代码。最近难得有空,打算学一学Vue3。之前一直做后端,没用过Vue,写页面都是走的服务端渲染模板的方式。要做js操
使用Docker+Jenkins+Gitlab+MySQL+Nginx自建一套devops系统
文章简介文本主要的内容是,利用Jenkins+Gitlab+Nginx+MySQL+Docker搭建一套公企业级的自动化系统。整个系统的流程图如
到底是RWD(响应式网页设计)好还是AWD好?
没有RWD或AWD的网站到底会怎样?先讲结论,网站流量会暴跌,RWD跟AWD就是可移动端浏览的网站,而现在用移动设备上网的比例超过80%,而且搜索引擎已经以移动端网站表现为排名依据,简单来说没有移动版的网站等于宣告死刑,无法被搜索的网站有什么用?