html - 在外部滚动 div 之外显示内部绝对定位的 div

Question

这是我创建的示例演示 - https://jsfiddle.net/smitamore/jmbvy6re/4/ .

.scroll-limit{
  width: 100%;
  height: 100px;
  overflow: scroll;
  background: #0066CC;
  color: white;
}

.fruit_list{
  position: absolute;
  list-style-type: none;
  overflow: scroll;
  height: 100px;
  padding-left: 0;
  margin: 0;
  width: 200px;
  top: 0;
  background: #CCFFE5;
  color: black;
  display: none;
  padding-left: 10px;
}

如果您单击任何复选框，以下列将在滚动 div 中显示水果列表。即使外部滚动 div 小于内部滚动 div，我也想确保完整显示此滚动 div。

如果有人能帮我解决这个问题，我将不胜感激。 提前致谢。

Answer 1

将您的功能更改为

$('.show_fruits').change(function() {
if(this.checked) {
   $(this).closest('tr').find('.fruit_list').show();
   $(this).closest('tr').find('td.fruit_list_wrapper').css('position', 'absolute');
}else{
    $(this).closest('tr').find('.fruit_list').hide();
  $(this).closest('tr').find('td.fruit_list_wrapper').css('position', 'relative');
}

});

要显示的元素不能将属性“position”设置为“relative”，所以当它出现时将其更改为“absolute”，必须隐藏时再设置为“relative”

你也可以创建另一个类，例如

.fruit_list_wrapper_visible{
  position: absolute!important;
}

然后在你的函数中添加一行简单的代码，就像这样

$('.show_fruits').change(function() {
    if(this.checked) {
       $(this).closest('tr').find('.fruit_list').show();       
    }else{
        $(this).closest('tr').find('.fruit_list').hide();
    }

    $(this).closest('tr').find('td.fruit_list_wrapper').toggleClass('fruit_list_wrapper_visible');
});

编辑 - 正如作者提到的那样，唯一的问题是如果您滚动外部 div，内部水果列表将保持在同一位置。要解决这个问题，只需将 "z-index: 1;" 添加到 "fruit_list_wrapper" 类即可。