javascript - html两层滚动对象，如何做到上层滚动到底时不影响下层滚动？
如下代码中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个答案
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下表现不尽理想。 运行效果截图如下： 在线演示