面板内<ul>滚动事件无法捕获，如何监听滚动至最后一个<li>？

Hey there, let's tackle your two issues one by one:

1. Why the scroll event on #list isn't firing #

Looking at your CSS, you've set overflow-y: scroll on .chat-panel .panel-body—that means the scrollable element is the .panel-body div, not the <ul id="list"> itself. The <ul> is just the content inside the scrollable container, so it won't trigger the scroll event. You need to attach the scroll listener to the .panel-body instead.

2. Detecting when you scroll to the last <li> #

To check if you've reached the last list item, we'll compare the scroll position of the container with the position of the last <li>:

• Calculate the scrollable container's scroll position and visible height
• Check if that combined value is greater than or equal to the bottom position of the last <li> (relative to the container)

Full Fixed Code #

<!DOCTYPE html>
<html>
<head>
    <style>
        .chat li { 
            margin-bottom: 10px; 
            padding-bottom: 5px; 
            border-bottom: 1px dotted #999; 
            height: 40px; /* Added height to make scrolling visible */
        }
        .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; 
            border: 1px solid #ccc; /* Added border for visibility */
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){ 
            // Attach scroll event to the actual scrollable container: .panel-body
            $('.chat-panel .panel-body').on('scroll', function() {
                const $container = $(this);
                const $lastLi = $container.find('#list li:last');
                
                // Calculate positions relative to the scroll container
                const containerScrollTop = $container.scrollTop();
                const containerHeight = $container.height();
                const lastLiBottom = $lastLi.offset().top - $container.offset().top + $lastLi.outerHeight();
                
                // Trigger when we've scrolled to or past the last list item
                if (containerScrollTop + containerHeight >= lastLiBottom) {
                    alert("Reached the last list item!");
                }
            });
        });
    </script>
</head>
<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">Chat item 1</li>
                <li class="left clearfix">Chat item 2</li>
                <li class="left clearfix">Chat item 3</li>
                <li class="left clearfix">Chat item 4</li>
                <li class="left clearfix">Chat item 5</li>
                <li class="left clearfix">Chat item 6</li>
                <li class="left clearfix">Chat item 7</li>
                <li class="left clearfix">Chat item 8</li>
                <li class="left clearfix">Chat item 9</li>
                <li class="left clearfix">Chat item 10</li>
                <li class="left clearfix">Chat item 11</li>
                <li class="left clearfix">Chat item 12</li>
            </ul>
        </div>
    </div>
</body>
</html>

Key Changes Made: #

• Moved the scroll event listener from #list to .chat-panel .panel-body (the actual scrollable element)
• Added position calculations to detect when the last <li> enters the visible area
• Added minor styling (list item height, container border) to make scrolling behavior easier to test
• Added text to list items so you can see content while scrolling

内容的提问来源于stack exchange，提问作者Stfvns