时间戳

首页 > 解决方案 > 动态添加子代时如何设置父代可滚动

javascript - 动态添加子代时如何设置父代可滚动

问题描述

多次点击按钮

为什么.wrap - max-height不起作用

我希望它受到限制，100vh - 108px并且如果需要也.ins可以滚动。

有什么帮助吗？

$('button').on('click', function(){
  let a = "<div class='abc'>ABC</div>";
  $(a).appendTo($('#ins'));
});
.wrap{
  position:fixed;
	left:50%;
	top:54px;
	transform:translateX(-50%);
	max-height:calc(100vh - 108px);
  background:silver;
  overflow:hidden;
}
.title{background:gold;}
.bottom{margin-top:5px;}
.sub{background:orange;}
.ins{overflow-y:scroll;}
.abc{background:lightgreen;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div class='wrap'>
<div class='title'>LOREM</div>
<div class='bottom'>
<div class='sub'>IPSUM</div>
<div class='ins' id='ins'>
<div class='abc'>ABC</div>
</div>
</div>
</div>

标签： javascripthtmljquerycss

解决方案

将 .ins 更改为如下所示

    $('button').on('click', function(){
    let a = "<div class='abc'>ABC</div>";
    $(a).appendTo($('#ins'));
  });
.wrap{
  position:fixed;
  left:50%;
  top:54px;
  transform:translateX(-50%);
  max-height:calc(100vh - 108px);
  background:silver;
  overflow:hidden;
}
.ins {
overflow-y: auto;
max-height: calc(100vh - 108px);
}
.title{background:gold;}
.bottom{margin-top:5px;}
.sub{background:orange;}
.abc{background:lightgreen;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button>CLICK</button>
    <div class='wrap'>
    <div class='title'>LOREM</div>
    <div class='bottom'>
    <div class='sub'>IPSUM</div>
    <div class='ins' id='ins'>
    <div class='abc'>ABC</div>
    </div>
    </div>
    </div>

推荐阅读