Question

无法捕捉ul内panel内的滚动。我这样想但不行。你能解决这个问题吗。感谢

$(document).ready(function(){
  $('#list').on('scroll', function() {
    alert("test");
  });
});

.chat li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #999;
}

.chat li.left .chat-body {
    margin-left: 60px;
}


.chat li.right .chat-body {
    margin-right: 60px;
}

.chat li .chat-body p {
    margin: 0;
}

.panel .slidedown .glyphicon,
.chat .glyphicon {
    margin-right: 5px;
}

.chat-panel .panel-body {
    height: 250px;
    width: 400px;
    overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br />  
<div class="chat-panel panel">
  <div class="panel-body">
    <ul class="chat" id="list">
      <li class="left clearfix"></li>
      <li class="left clearfix"></li>
      <li class="left clearfix"></li>
      <li class="left clearfix"></li>
      <li class="left clearfix"></li>
      <li class="left clearfix"></li>
      <li class="left clearfix"></li>
      <li class="left clearfix"></li>
      <li class="left clearfix"></li>
    </ul>
  </div>
</div>
</body>

Answer 1

.panel-body正在滚动。您可以调整jQuery来检测它。

$(function() {
  $('.panel-body').scroll(function() {
    alert("test");
  });
});

.chat li {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #999;
}

.chat li.left .chat-body {
  margin-left: 60px;
}

.chat li.right .chat-body {
  margin-right: 60px;
}

.chat li .chat-body p {
  margin: 0;
}

.panel .slidedown .glyphicon,
.chat .glyphicon {
  margin-right: 5px;
}

.chat-panel .panel-body {
  height: 250px;
  width: 400px;
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <br />
  <div class="chat-panel panel">
    <div class="panel-body">
      <ul class="chat" id="list">
        <li class="left clearfix"></li>
        <li class="left clearfix"></li>
        <li class="left clearfix"></li>
        <li class="left clearfix"></li>
        <li class="left clearfix"></li>
        <li class="left clearfix"></li>
        <li class="left clearfix"></li>
        <li class="left clearfix"></li>
        <li class="left clearfix"></li>
      </ul>
    </div>
  </div>
</body>

Answer 2

试试以下演示：

<强> demo

<强>脚本

$(document).ready(function(){
  $('.panel-body').on('scroll', function() {
    alert("test");
  });
});

在面板

2 个答案: