本文作者：严文彬
原创声明：本文为阅文前端团队 YFE 成员出品，请尊重原创，转载请联络大众号 (id: yuewen_YFE) 获取授权，并注明作者CSS、出处和链接。
发挥你的梦想，CSS也能完毕拖拽作用。
一、拖拽作用示例
这是移动端很常见的一个作用，能够按住拖来拖去，比如下面的起点中文网触屏版：
这类作用用JS能够很前端开发简略完毕，无非便是多了一些核算，多考虑了一些临界场景，然后代码量也多了一些。不过，通过我的一番脑洞ios是什么意思，发现CSS也能简直完毕这一作用，接着往下看。
二、CSS完毕原理
在传统 web 中，页面翻滚是一个很常见交互，操作上便是运用鼠标滚轮或许直接拖动翻滚条。可是，移动端可不相同，直接用手指拖动页面就能够翻滚了。一般页面是要么笔直方向翻滚，要么水平方向翻滚，假定两陈思思个方向都能够翻滚呢？例如
.draios8备忘录gbox{
width: 300px;
height: 300px;
overflow: auto
}
.dragcon{
width: 500px;
height: 500px;
}
只需求内部元素宽高都大于容器就完毕两个方向的翻滚了（记得设置overflow:auto），暗示如下
一般情况下，鼠标滚轮只能同时翻滚一个方向（按住Shift能够翻滚另一方向），可是移动端能够直接拖着内容任意翻滚，如下所示
现在，ios是什么意思在内容中心增加一个元素，跟前端开发是干什么的从内容区域一同翻滚
接下陈涉世家翻译及原文来，把后边的文本躲藏起来
是不是有点拖拽的滋味了？原理便是这么简略！
三、CSS完毕细节
首要供认拖拽方针与拖拽容器的规范联络，假定拖拽方针的规范是w * h，那么很简略得出的规范联长生十万年系为：内部规范是容器的2倍减去拖拽方针的规范
.draios14.4值得晋级吗gbox{
width: 100%;
height: 100%;
}
.辰时是几点到几点dragcon{
width: calc(200% - w);
hios下载eig前端开发需求掌握什么技术ht: calc(200% - h);
}
用一张动图描绘如下（中心的橙色块块标明拖拽前端面试题2021方针）
四、CSS完毕ios14.4.1更新了什么布局
接下来需求把这个特性加入到页面傍边，这html是什么意思儿列举了前端开发薪酬一般多少两种布ios是什么意思局
- fixed 定位
现在直接把刚才的布局增加到页面上，并增加fixed定位
<html标签属性大全body>
...页面上的其他元素
&lhtml5网页制造t;diiOSv class=“dragbox”&gios下载t;
<div class=“dragcon”></div>
<divios14桌面布局图片 class=“ball”></div> <!--拖拽元素-->
</div>
&HTMLlt;/body>
要害款式如下
.dragbox{
positihtml空格代码怎样写on: fi前端开发需求学什么xed;
left: 0;
top: 0;
right: 0;
bohtml5网页制造ttom: 0;
overflow: auto
}
层级暗示联络如下
这样一来，dragbox必定把页面原有的部分遮挡了，所以还需求增加pointer-events: none;前端学什么同时在拖拽时增加pointer-events: all
.dragbox{
/*...*/
pointer-events: none;
}
.ball{
/*...*/
pointer-events:ios14.4值得晋级吗 all;
}
.dragbox.activehtml简单网页代码{
/*..ios14.4.1更新了什么.*/
pointer-events: all;
}
凭仗 JS 能够在按下时触发外层容器翻滚
ball.addEios14桌面布局图片ventListener('touchstart',(ev)前端和后端的区别=>{
dragbox.classList.add('active');
})
document.addEventListener('touchend',()=>{
dragbox.classList.remove('active');
})
实际作用如下
无缺前端和后端哪个薪酬高代码可拜访c前端面试题odepen.io/xboxyan/pen…（PC拜访请翻开移动端方法）
也可直接扫描以下二维码
- absolute 定位 + 层级
前面一种布局由于fixed定位层级的影响，不得不凭仗 JS 来动态改动html是什么意思容器的状况，有没前端开发薪酬一般多少有什么方法能够完毕既能够拖拽，又不影响原HTML有html文件怎样翻开页面呢？下html标签面来看这一种布局，用到了absios8备忘录olute定位
这儿需求对原有页面包裹一层div容器，如下
&l前端开发需求学什么t;body>
<div class=“dragbox”>
<div class=“dragcon”></div>
&前端学什么lt;div class=“ball”></div>
</div>
<div c前端lass=“body”> &CSSlt;!--单独用一层完毕页面翻滚-->
...页面上的其他元素CSS
</div>
</body>
要害款式如下
.dragbox{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.body{
position: relative前端和后端哪个薪酬高;
height: 100%;
overflow: auto;
}
.ball{
position: rCSSelatios下载ive;
z-index: 10; /*拖拽方针的层级设置高一点*/
}
现在层级联络就变成了这样
这儿原先页面内容在层级上处于dragbox和拖拽方针之间，所以在拖拽时也不会影响到原有页面的翻滚，无需任何 JS 处理
无缺代码可拜访codepen.io/xboxyan/pe超崇高骑士n…（PC拜访请翻开移动端方法）
也可直接扫描以下二维码
提示：上面两种布局方法，榜首种办长沙市气候法ios模拟器适应性更HTML好，不影响现有项目；第二种领会更好，可是会运用div作为页面翻滚容器，会对页面结构做必定的改动，能够根据实际情况自行选择。
五、CSS完毕其他功用
- 吸附功用
许多时候，在拖拽完毕时需求让它主动吸附在边沿，就如同文章最初的暗示图相同。那么，通陈涉世家翻译及原文过吸附，能够联想到什么特征呢？
答案便是CSS Scroll Snap
<辰时是几点到几点;body>ios14.4怎样样;
...页面上的其他元素
&前端和后端哪个薪酬高lt;div class=“dragbox”>
<div class=“dragcon”>A</div>
<div class=“dragcon”>B</div>
<div class=“ball”></div>
</div>
</body>
下面是要害款式
.dragbox{
...
scroll-snap-tyhtml是什么意思pe: x mandatory;
}
.dragcon{
scroll-snap-align长沙商贸旅游工作技术学院: start;
}ios8备忘录
实际作用如下
无缺代码可拜访前端codepen.io/xboxyan/pen…（PC访前端开发需求学什么问请翻超神兽宠店开移动端方法）
也可直接扫描以下二维码
- 设置初始方位
默许情况下，拖拽方针是唯有右下角的，如何位于左下角呢？很简略，这儿拖拽是翻滚容器完毕的，所以只需求改动 scrollLeft 或许 scrollTop 即可
dragbox.scrollLeft = 999;
dragbox.陈涉世家翻译及原文scrollTop = 999;
除此之外，也能够选用纯 HTML 方法完毕，运用元素的 autofocus 主动调集到可视规划的特性
<div class=“drahtml标签属性大全gcon"&前端开发gt;
...
<button class="pos" autofocus></button&gios14.4怎样样t; <!--增加一个主动调集的元素-->
<html是什么意思/div>
比如你希望初始方位在左上角，那么增加一个右下角的主动调集元素就能够了（当然还需求设置透明度等躲藏起来）~
- 设置间隔
现在拖拽方针的间隔是屏幕边沿，有时候或许需求留一些距离，这种需求在 CSS 就很简略了，能够改动left/top/right/bottom、padding、border...许多方法
.dragbox{
left: 10px;
tophtml: 10px;
right: 10px;
botto前端m: 10px;
/*rect: 10px;*/
}
.dragbox{
paddinghtml代码: 10px;
}
六、阐明和小结
关于兼容性本来以为是没什么问题的，实测下来 ios 问题多多，主要是 safari 翻滚容器的问题。例如，有些低版本 ios 翻滚不顺利，需求增加-前端和后端的区别webkit-overflow-scrolling:touch，才能完毕滑润翻滚和主动吸附，可是又会导致层级问题，有些文档上描绘设置该特征会创前端面试题2021立一个原生的翻滚容器，层级最高。还有前端面试题榜首种 fixed 布局，假定默许情况下设置pohtml简单网页代码inter-events: none，在touchstart之后设置成auto，这个在 ios 上翻滚居然失效了，可是回转过来就能够了（demo中已兼容ios）。
长处嘛，继承 CSS 的html简单网页代码灵活性，简直零本钱，简略复用，同时运用了原生翻滚，也不会有卡顿。
不过也有少量限制，假定拖拽方针的规范是不固定的，或许需求凭仗 JS 来获取了。当然相比较而言，这仍是一辰时是几点到几点个性价比极高的结html文件怎样翻开束方法。
现在回头看看，其实也没有用到什么非常冷僻的特征（scroll-snap 或许算一个，不过毕竟是辅佐功用），主要仍是常见的作用，然后通过联想和发散，根据素日的堆集，充沛开掘原生的才能，最终完毕所需求的交互，然后就有了本文。
感谢阅读，希望能对日陈涉世家翻译及原文后的作业有所启示。
