移动端上拉抽屉效果
217 字
1 分钟
移动端上拉抽屉效果
移动端抽屉
移动端上拉抽屉是一种常见的交互效果，可以在屏幕底部显示一个可拖动的视图，用于展示更多的内容或功能。实现这种效果的代码有多种方式，这里介绍一种基于CSS和JavaScript的demo，代码和演示效果如下。
demo仅在移动端有效，pc端无效
<!DOCTYPE html><html><head> <title>移动端拖住增加元素高度</title> <style> #drag-element { width: 100%; height: 200px; background-color: rgb(46, 228, 197); margin: 50px auto; position: absolute; bottom: 0; max-height: 90%; } </style></head><body> <div id="drag-element"></div> <script> const element = document.getElementById('drag-element'); let initialTouchPosition; let initialElementHeight; element.addEventListener('touchstart', (event) => { initialTouchPosition = event.touches[0].clientY; initialElementHeight = element.offsetHeight; }); element.addEventListener('touchmove', (event) => { const currentTouchPosition = event.touches[0].clientY; const touchDistance = initialTouchPosition - currentTouchPosition; const newElementHeight = initialElementHeight + touchDistance; element.style.height = `${newElementHeight}px`; }); element.addEventListener('touchend', () => { initialTouchPosition = null; initialElementHeight = null; }); </script></body></html>DEMO
示例如下,打开移动端抽屉DEMO查看
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章 智能推荐
1
el-select和el-cascader多选数据格式修改为字符串
IT 2025-01-12
2
可视化展示台伪军“雄风”系统机动部署
IT 2024-11-03
3
uniapp跳转第三方地图app
IT 2024-07-07
4
cesium学习1-航班跟踪器
IT 2024-03-02
5
为服务器安装雷池WAF防火墙
IT 2023-12-08
随机文章 随机推荐