html两层滚动对象，如何做到上层滚动到底时不影响下层滚动？

站长

2024年08月11日 09:21 · 阅读数 12

如下代码中id="pop"滚动层，如何在滚动到最底部时再向上滚动不会变成滚动下层滚动内容？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Example</title>
<style>
html {
  font-size: 5.33333vw;
}

section.main {
  position: relative;
}
section.main header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  height: 2.25rem;
  background-color: #e1e1e1;
}
section.main section.pop {
  position: absolute;
  width: 100%;
  background-color: #f3f3f3;
  left: 0;
  right: 0;
  z-index: 88;
  overflow: auto;
}
section.main section.pop.one {
  height: 25rem;
}
section.content {
  position: relative;
  z-index: 66;
  background-color: #fff;
  top: 2.25rem;
  left: 0;
  right: 0;
}
</style>
</head>
<body>
<section class="main">
  <header>固定头部</header>
  <section class="pop one" id="pop">
    <ul>
      <li pdata=1 id="pop1">pop1</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=2 id="pop2">pop2</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=3 id="pop3">pop3</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=4 id="pop4">pop4</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=5 id="pop5">pop5</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=6 id="pop6">pop6</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=7 id="pop7">pop7</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=8 id="pop8">pop8</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=9 id="pop9">pop9</li><li>1</li><li>1</li><li>1</li><li>1</li>
      <li pdata=10 id="pop10">pop10</li><li>1</li><li>1</li><li>1</li><li>1</li>
    </ul>
  </section>
</section> 
<section class="content">
  <ul>
    <li>1x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>2x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>3x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>4x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>5x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>1x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>2x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>3x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>4x</li><li>1</li><li>1</li><li>1</li><li>1</li>
    <li>5x</li><li>1</li><li>1</li><li>1</li><li>1</li>
  </ul>
</section>
</body>
</html>

1个回答

test

2024-08-11

overscroll-behavior

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容