只有当列表滑动到顶端时, 继续下滑, 才会收起整个列表. 否则只是列表滑动.
时间: 2023-05-26 07:06:10 浏览: 61
这种行为通常称为“下拉刷新”或“下拉关闭”。它可以通过监听列表滚动事件来实现。当列表滚动到顶部时,可以将一个外部容器设为不可见并且停止滚动事件的冒泡传递。这将导致在列表顶部下拉时,外部容器处于隐藏状态,当用户继续下滑时则会完全关闭列表。
以下是一个使用 JavaScript 和 CSS 实现下拉关闭效果的代码示例:
HTML 代码:
```
<div id="wrapper">
<div id="list">
<!-- 列表内容 -->
</div>
</div>
```
CSS 代码:
```
#wrapper {
position: relative;
overflow: hidden;
}
#list {
/* 初始位置 */
transform: translateY(0);
transition: transform .3s ease-out;
}
```
JavaScript 代码:
```
var startY, lastY;
document.getElementById('list').addEventListener('touchstart', function (e) {
startY = e.touches[0].pageY;
});
document.getElementById('list').addEventListener('touchmove', function (e) {
lastY = e.touches[0].pageY;
if (lastY > startY) {
e.preventDefault();
}
});
document.getElementById('list').addEventListener('touchend', function (e) {
if (lastY > startY && window.getComputedStyle(list)['transform'] === 'matrix(1, 0, 0, 1, 0, 0)') {
// 列表处于顶部且向下滑动时,隐藏外部容器并禁止滚动事件冒泡
wrapper.style.display = 'none';
document.body.style.overflow = 'hidden';
}
});
document.addEventListener('touchmove', function (e) {
if (wrapper.style.display === 'none') {
e.preventDefault(); // 禁止滚动事件冒泡
}
});
```
这段代码会在用户滑动列表时监听触摸事件,并按照以下步骤处理:
1. 在 touchstart 事件中记录起始触摸位置 startY。
2. 在 touchmove 事件中记录最后触摸位置的纵坐标 lastY,并根据它是否大于 startY 来判断用户是否向下滑动了列表。
3. 在 touchend 事件中如果列表滚动到顶部且用户向下滑动了列表,则隐藏外部容器 wrapper 并禁止滚动事件冒泡。
4. 最后,在整个页面的 touchmove 事件中,如果外部容器 wrapper 处于隐藏状态,则禁止滚动事件冒泡。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)