Question

我有bootstrap模式，其中包含可滚动的div id=moreContent，并且当单击按钮时模态打开。但问题是，如果我用滚动条关闭div然后我尝试重新打开模式滚动功能也被调用。我在这做错了什么。

＆＃13;

$(document).ready(function() {

  $("#buttonId").click(function() {
    $('#myModal').openModal();
  });

  $("#moreContent").scroll(function() {
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this[0].scrollHeight) {
        console.log("this should be called only if manually scrolled ??");
      }
    }
  });
});

＆＃13;

#myModal {
  max-height: 700px;
  height: 700px;
  min-height: 700px;
  max-width: 912px;
  min-width: 912px;
  width: 912px;
}

#moreContent {
  overflow-y: auto;
  max-height: 300px;
  min-height: 300px;
}

＆＃13;

<div id="myModal" class="modal confirm-dialog">
  <div class="modal-content">
    <div id="moreContent">
      <div id="moreSupervisorContent"></div>
      <div id="moreSubordinateContent" class="hidden"></div>
    </div>
  </div>

＆＃13;

Answer 1

这是因为你的模态正在改变文档的大小。当文档更改大小时，滚动位置会更改，从而触发滚动事件。

这很可能是因为你的模态有一个固定的高度。在Web开发中设置固定大小通常是一个坏主意，因为您无法预测某人的屏幕或浏览器的大小。

要解决此问题，您应该将模态设置为absolute或fixed位置，将其设置为100％高度并让它处理溢出而不是#moreContent。 position将使文档不会增长，并且模式只会在其内容大于其时显示滚动条。

＆＃13;

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  
  background: rgba(0, 0, 0, 0.8);
  overflow: auto;
}

.modal__content {
  height: 700px;
  width: 60%;
  margin: 30px auto;
  padding: 30px;
  
  background: #CCC;
}

＆＃13;

<div class="modal">
  <div class="modal__content">
    <h3>This is the modal content</h3>
    <p>This is some content inside the modal and it is fixed to 700px height</p>
  </div>
</div>

<h1>This is the page</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>

＆＃13;

当模态打开和关闭时，自动调用滚动功能

1 个答案: