javascript - 在滚动事件中使用 Jquery

Question

滚动页面时，我无法在 console.log 中显示文本。

$("#idOfUl").on('scroll', function() {
  console.log('Event Fired');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="idOfUl">
  <ul>
    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>


    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>
  </ul>


</div>

滚动页面时，我无法在 console.log 中显示文本。

滚动页面时，我无法在 console.log 中显示文本。

滚动页面时，我无法在 console.log 中显示文本。

滚动页面时，我无法在 console.log 中显示文本。

滚动页面时，我无法在 console.log 中显示文本。

标签： javascriptjqueryscrollonscrollonscrolllistener

Answer 1

该元素需要是可滚动的（带有 的固定高度overflow:scroll）。

$("#idOfUl").scroll(function() {
  console.log('Event Fired');
});

#idOfUl {
  height: 100vh;
  overflow: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="idOfUl">
  <ul>
    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>


    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>
  </ul>


</div>