获取距离父元素最近的子元素，并实现顶部模糊效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .scroll-box {
      width: 300px;
      height: 200px;
      overflow: auto;
      border: 1px solid #ccc;
      position: relative;
    }

    .blur-top {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 300px;
      height: 20px;
      backdrop-filter: blur(4px);
      display: none;
      background-color: rgba(255, 255, 255, 0.5);
      /* 添加半透明背景 */
      z-index: 9999;

    }
  </style>
</head>

<body>
  <div class="blur-top" id="blurTop"></div>
  <div>
    <div class="scroll-box" id="scrollBox">
      <!-- 假设有大量内容 -->
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...1</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...2</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...3</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...3</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...3</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...3</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...3</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...3</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...3</div>
      <!-- 更多内容 -->
    </div>
  </div>
  <script>
    const scrollBox = document.getElementById('scrollBox');
    const blurTop = document.getElementById('blurTop');

    // 修改事件监听器中的日志打印部分
    scrollBox.addEventListener('scroll', function () {
      if (this.scrollTop > 0) {
        blurTop.style.display = 'block';
      } else {
        blurTop.style.display = 'none';
      }
      const touchedElement = getTouchedElement();
      console.log('碰到上边框的元素:', touchedElement ? `Width: ${touchedElement.width}, Height: ${touchedElement.height}` : 'None');
    });

    function getTouchedElement() {
      const children = scrollBox.children; // 获取scrollBox的所有子元素
      let touchedChild = null;
      let topEdge = scrollBox.getBoundingClientRect().top;

      for (const child of children) {
        let childRect = child.getBoundingClientRect();
        if (childRect.top <= topEdge && childRect.bottom > topEdge) { // 检查子元素的顶部是否触及或跨过容器顶部
          console.log(topEdge, childRect, 'childRect');
          touchedChild = {
            element: child,
            width: child.offsetWidth, // 获取元素的宽度
            height: child.offsetHeight // 获取元素的高度
          };
          break; // 找到第一个这样的子元素后即停止搜索
        }
      }
      return touchedChild; // 返回包含元素和尺寸信息的对象
    }
  </script>
</body>

</html>
posted @ 2024-07-15 18:11  unique-yb  阅读(11)  评论(0)    收藏  举报