当前位置: 首页 > 知识库问答 >
问题:

javascript - html两层滚动对象,如何做到上层滚动到底时不影响下层滚动?

惠文彬
2024-07-29

如下代码中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个答案

邢乐
2024-07-29

overscroll-behavior

 类似资料:
  • 现在的情况是:当内部滚动条滚动到底部时如果继续滚动,外部滚动条不会滚动,需要停顿或者移动鼠标滚动才能触发外层滚动条

  • 本文向大家介绍利用jquery禁止外层滚动条的滚动,包括了利用jquery禁止外层滚动条的滚动的使用技巧和注意事项,需要的朋友参考一下 前言 通常情况下,当内部滚动条滚动到两端时,再接着滚动时外层的滚动条就会跟着滚动;可是有时我们希望用户只能滚动当前区域,而不触发外层(window)的滚动条,离开当前区域后,才能滚动外层的滚动条。因为用户可能一不小心滚动的幅度过大了,导致当前区域离开可视区域。 在

  • 比如有对象 我只能按照顺序拿到数组['a', 'b', 'c', 'd', 'f'] 如果想给f赋值, 只能 如果想要写上面这个表达式的通用函数,要怎么写。

  • 问题内容: 我正在使用Rails中的Ajax请求创建聊天,并且试图使div滚动到底部没有太多运气。 我将所有内容包装在这个div中: 有没有一种方法可以使用JS将其默认滚动到底部? 有没有办法在ajax请求之后将其滚动到底部? 问题答案: 这是我在网站上使用的内容:

  • 本文向大家介绍jquery实现楼层滚动效果,包括了jquery实现楼层滚动效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码,供大家参考,具体内容如下 html: js: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍jQuery实现浮动层随浏览器滚动条滚动的方法,包括了jQuery实现浮动层随浏览器滚动条滚动的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下: 这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想。 运行效果截图如下: 在线演示

  • 问题内容: 以下文章是否仍然是检测UITableView实例何时滚动到底部(在Swift中),还是自那以来已被更改(例如:改进)的公认方法? 谢谢。 问题答案: 试试这个 或者你可以这样找到

  • 问题内容: 我需要将JScrollPane滚动到底部。JScrollPane包含一个JPanel,其中包含许多JLabel。 要滚动到顶部,我只需要: 但是如何精确滚动到最底端?(太远了,它抖动) 问题答案: