在引导模式内的特定 div 内滚动不起作用答案

【问题标题】：scrolling inside a particular div inside bootstrap modal not working在引导模式内的特定 div 内滚动不起作用
【发布时间】：2018-05-17 13:36:29
【问题描述】：

<div class="modal-body">
	<div class="choose-body">
		<div class="choose-my-connection" style="display: block;">
			<div class="choose-my-accnt-head">
				<h2>My Connections</h2>
			</div>
			<div class="choose-my-accnt-body ">
				<ul class="connection_list_tab"></ul>
			</div>
		</div>
	</div>
</div>

两个 javascript 都不起作用。

$('#myModal').on('scroll', '.connection_list_tab', function(event) {
    console.log('post');
});

$('.connection_list_tab').scroll(function(event) {
    console.log('post');
});

【问题讨论】：

标签： jquery html scroll

【解决方案1】：

您必须使用 overflow:auto 类 .connection_list_tab 使其可滚动。现在，当您滚动 div 时，它会触发 .scroll() 事件。

$('.connection_list_tab').scroll(function(event) {

    console.log('post');
});

.connection_list_tab{
  max-height: 50px;
  overflow: auto;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
			<div class="choose-body">
				<div class="choose-my-connection" style="display: block;">
					<div class="choose-my-accnt-head">
						<h2>My Connections</h2>
					</div>
					<div class="choose-my-accnt-body ">
						<ul class="connection_list_tab" >
              <li> asjkdjkasd </li>
              <li> asjkdjkasd </li>
              <li> asjkdjkasd </li>
              <li> asjkdjkasd </li>
              <li> asjkdjkasd </li>
              <li> asjkdjkasd </li>
              <li> asjkdjkasd </li>
            </ul>
					</div>
				</div>
			</div>
		</div>

【讨论】：