HTML实现点击触发div下滑渐隐及移动端拖拽滑出效果咨询

你可以通过补充CSS过渡规则 + 原生JS事件监听实现需求，完整代码修改如下：

补充后的CSS代码 #

#home_main_main {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 3px solid darkgrey;
  width: calc(100% - 6px);
  height: 80%;
  left: 0px;
  position: absolute;
  position: fixed;
  left: 0;
  bottom: 0;
  /* 新增：过渡动画，让属性变化更流畅 */
  transition: all 0.3s ease;
  /* 新增：防止拖拽时选中文本 */
  user-select: none;
}

/* 新增：隐藏状态的样式 */
#home_main_main.hide {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

b {
  font-size: 20px;
  cursor: pointer;
}

JS交互代码 #

直接在页面中插入这段JS即可：

const targetDiv = document.getElementById('home_main_main');
const helloText = targetDiv.querySelector('b');
// 拖拽相关变量
let startTouchY = 0;
let isDragging = false;
// 触发消失的拖拽阈值，单位px
const DISMISS_THRESHOLD = 100;

// 1. 点击Hello触发下滑渐隐
helloText.addEventListener('click', () => {
  targetDiv.classList.add('hide');
});

// 2. 移动端拖拽逻辑
targetDiv.addEventListener('touchstart', (e) => {
  isDragging = true;
  startTouchY = e.touches[0].clientY;
  // 拖拽时关闭过渡，保证跟手性
  targetDiv.style.transition = 'none';
});

document.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const currentY = e.touches[0].clientY;
  // 只响应向下拖拽的动作
  const dragDistance = Math.max(0, currentY - startTouchY);
  // 拖拽距离越大，透明度越低
  const opacity = Math.max(0, 1 - dragDistance / 200);
  targetDiv.style.transform = `translateY(${dragDistance}px)`;
  targetDiv.style.opacity = opacity;
});

document.addEventListener('touchend', () => {
  if (!isDragging) return;
  isDragging = false;
  // 恢复过渡效果
  targetDiv.style.transition = 'all 0.3s ease';
  const finalDragDistance = Math.max(0, event.changedTouches[0].clientY - startTouchY);
  
  if (finalDragDistance >= DISMISS_THRESHOLD) {
    // 拖拽超过阈值，触发消失动画
    targetDiv.classList.add('hide');
  } else {
    // 未超过阈值，回弹到初始位置
    targetDiv.style.transform = 'translateY(0)';
    targetDiv.style.opacity = '1';
  }
});

逻辑说明 #

• 点击Hello文本时会给目标div添加hide类，触发预定义的下滑+渐隐动画
• 移动端拖拽时会实时计算下拉距离，同步修改div的偏移量和透明度，实现跟随移动、逐渐变暗的效果，拖拽距离超过阈值后会直接触发消失动画，否则自动回弹到初始位置

内容的提问来源于stack exchange，提问作者Ɗααɳιടԋ Sყҽԃ