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”，因此您只需将其更改为“绝对”，并在必须隐藏时再次设置为“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”类。

在外部滚动div

1 个答案: