Question

我在固定位置div内有两个div。是否有一种方法可以使两个div滚动隔离另一个。像滚动一个不影响另一个？我在子div上使用overflow auto，在父div上使用overflow hidden但这似乎不起作用（一个div的滚动似乎影响另一个div）

以下是代码：

.parent { 
    position: fixed;
    overflow:hidden;
    min-width: 800px 
    min-height: 400px;
    width: 100%;
    height: 100%;
}

.inner1 { 
    position: relative;
    overflow: auto;
    width: 50%;
    height: 100%;
}

.inner2 {
    position: relative;
    overflow: auto;
    width: 50%;
    height: 100%;
}

The inner1 and inner2 divs have to have a height of 100%.

<div class="outer">
  <div class="inner1">
  </div>
  <div class="inner2">
  </div>
</div>

Answer 1

将内部div上的溢出设置为滚动而不是隐藏将为您提供独立的滚动条。要显示滚动条，您需要为div设置高度。目前它们是100％所以无论它们有多少内容，它们总是会扩展以适应滚动条的不必要。

以下是一个使用您的代码如何工作的示例。

Codepen

CSS：

.parent { 
    position: fixed;
    overflow:hidden;
    min-width: 800px 
    min-height: 400px;
}

.inner1 { 
    position: relative;
    overflow: auto;
    width: 50%;
    height: 100px;
}

.inner2 {
    position: relative;
    overflow: auto;
    width: 50%;
    height: 100px;
}

HTML：

<div class="outer">
   <div class="inner1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut faucibus eros. Duis posuere porttitor sapien, non mollis purus efficitur pretium. Ut dolor diam, cursus sodales condimentum sit amet, porttitor vel diam. Quisque hendrerit massa ut mauris blandit, quis faucibus tortor pellentesque. Duis nulla nunc, bibendum et varius vitae, aliquam sit amet urna. Aliquam sit amet ultrices neque, eu elementum nisl. Cras ac felis ut sapien vestibulum lobortis et efficitur lacus. Etiam a quam a metus condimentum vestibulum. Etiam vel nunc dolor.

Sed eget ex facilisis, dictum lorem iaculis, tempor mi. Pellentesque tempus euismod lacus, at interdum nisi volutpat ac. Proin ornare ultrices massa. Ut in elementum magna, ac aliquet odio. Sed ac augue metus. Aliquam vitae quam dignissim, convallis urna non, pharetra sapien. Vestibulum quis ultrices mi. Cras posuere, ligula et molestie hendrerit, nulla nunc pharetra ligula, dignissim ullamcorper erat tortor vel odio. Quisque porta suscipit ex vel molestie. Morbi feugiat facilisis leo nec ultricies. Proin consequat ultricies erat a egestas. Maecenas in sollicitudin nisl. Curabitur tempor, augue ut fermentum molestie, tellus lorem sodales odio, facilisis dignissim mi lectus faucibus nulla. Etiam cursus id diam imperdiet vulputate.
   </div>
   <div class="inner2">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut faucibus eros. Duis posuere porttitor sapien, non mollis purus efficitur pretium. Ut dolor diam, cursus sodales condimentum sit amet, porttitor vel diam. Quisque hendrerit massa ut mauris blandit, quis faucibus tortor pellentesque. Duis nulla nunc, bibendum et varius vitae, aliquam sit amet urna. Aliquam sit amet ultrices neque, eu elementum nisl. Cras ac felis ut sapien vestibulum lobortis et efficitur lacus. Etiam a quam a metus condimentum vestibulum. Etiam vel nunc dolor.

Sed eget ex facilisis, dictum lorem iaculis, tempor mi. Pellentesque tempus euismod lacus, at interdum nisi volutpat ac. Proin ornare ultrices massa. Ut in elementum magna, ac aliquet odio. Sed ac augue metus. Aliquam vitae quam dignissim, convallis urna non, pharetra sapien. Vestibulum quis ultrices mi. Cras posuere, ligula et molestie hendrerit, nulla nunc pharetra ligula, dignissim ullamcorper erat tortor vel odio. Quisque porta suscipit ex vel molestie. Morbi feugiat facilisis leo nec ultricies. Proin consequat ultricies erat a egestas. Maecenas in sollicitudin nisl. Curabitur tempor, augue ut fermentum molestie, tellus lorem sodales odio, facilisis dignissim mi lectus faucibus nulla. Etiam cursus id diam imperdiet vulputate.
   </div>
</div>

滚动与另一个

1 个答案: