如何检测下拉框Options滚动的scrollTop实现AJAX加载更多数据？

算力阿峰

2026-6-28

原生Select下拉框滚动加载更多数据的解决方案

问题描述

我尝试用AJAX加载<select>下拉框的选项，想要在滚动选项列表时检测scrollTop来触发AJAX请求加载更多数据，但发现原生下拉框的选项列表不支持scrollTop检测和滚动事件监听，以下是我的代码：

我的HTML代码

<html>
<head>
    <title>Webslesson Tutorial | Auto Load More Data on Page Scroll with Jquery & PHP</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <select id="load_data"></select>
    </div>
</body>
</html>

我的JS代码

$(document).ready(function() {
    var limit = 50;
    var start = 0;
    var action = 'inactive';
    function load_country_data(limit, start) {
        $.ajax({
            url: "fetch.php",
            method: "POST",
            data: {
                limit: limit,
                start: start
            },
            cache: false,
            success: function(data) {
                $('#load_data').append(data);
                if (data == '') {
                    $('#load_data_message').html("<button type='button' class='btn btn-info'>No Data Found</button>");
                    action = 'active';
                } else {
                    $('#load_data_message').html("<button type='button' class='btn btn-warning'>Please Wait....</button>");
                    action = "inactive";
                }
            }
        });
    }
    if (action == 'inactive') {
        action = 'active';
        load_country_data(limit, start);
    }
    $(window).scroll(function() {
        console.log($('#load_data').scrollTop());
        console.log($('#load_data').height());
        if ($(window).scrollTop() + $('#load_data').height() > $("#load_data").height() && action == 'inactive') {
            action = 'active';
            start = start + limit;
            setTimeout(function() {
                load_country_data(limit, start);
            }, 1000);
        }
    });
});

我的PHP代码（fetch.php）

<?php
if (isset($_POST["limit"], $_POST["start"])) {
    for ($i = $_POST["start"]; $i < $_POST["start"] + $_POST["limit"]; $i++) {
        echo '<option>item ' . $i . '</option>';
    }
}

解决方案

原生<select>的下拉列表由浏览器原生控件渲染，不属于DOM树的可交互部分，因此无法直接监听其滚动事件或获取scrollTop值。下面提供两种可行的解决思路：

方案1：自定义下拉组件（推荐）

用HTML/CSS/JS模拟下拉框，完全控制滚动行为，实现真正的滚动加载。

修改后的完整代码

<html>
<head>
    <title>滚动加载更多下拉选项</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .custom-select-container {
            position: relative;
            width: 220px;
            margin: 20px 0;
        }
        .custom-select-trigger {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .custom-select-trigger::after {
            content: "▼";
            font-size: 12px;
            margin-left: 10px;
        }
        .custom-select-options {
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            right: 0;
            max-height: 250px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: none;
            z-index: 100;
        }
        .custom-select-option {
            padding: 8px 15px;
            cursor: pointer;
            border-bottom: 1px solid #f5f5f5;
        }
        .custom-select-option:last-child {
            border-bottom: none;
        }
        .custom-select-option:hover {
            background-color: #f8f9fa;
        }
        .load-more-message {
            padding: 10px;
            text-align: center;
            font-size: 13px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="custom-select-container">
            <div class="custom-select-trigger" id="selectTrigger">请选择选项</div>
            <div class="custom-select-options" id="load_data"></div>
            <div class="load-more-message" id="load_data_message"></div>
        </div>
    </div>
</body>
</html>
<script>
    $(document).ready(function() {
        var limit = 50;
        var start = 0;
        var action = 'inactive';
        var isDropdownOpen = false;

        // 切换下拉框显示/隐藏
        $('#selectTrigger').on('click', function() {
            $('#load_data').toggle();
            isDropdownOpen = !isDropdownOpen;
            // 打开时如果没有数据则加载初始数据
            if (isDropdownOpen && action === 'inactive' && $('#load_data').children().length === 0) {
                action = 'active';
                loadMoreOptions(limit, start);
            }
        });

        // 加载更多选项的AJAX函数
        function loadMoreOptions(limit, start) {
            $.ajax({
                url: "fetch.php",
                method: "POST",
                data: { limit: limit, start: start },
                cache: false,
                success: function(data) {
                    if (data.trim() !== '') {
                        // 将原生option转换为自定义选项元素
                        const optionElements = $(data).map(function() {
                            return `<div class="custom-select-option" data-value="${$(this).val()}">${$(this).text()}</div>`;
                        }).get().join('');
                        $('#load_data').append(optionElements);
                        $('#load_data_message').html('<span class="text-warning">加载中...</span>');
                        action = 'inactive';
                    } else {
                        $('#load_data_message').html('<span class="text-info">没有更多数据了</span>');
                        action = 'active';
                    }
                }
            });
        }

        // 监听自定义下拉框的滚动事件，触发加载更多
        $('#load_data').on('scroll', function() {
            const $this = $(this);
            // 判断是否滚动到接近底部（距离底部20px以内）
            if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight - 20 && action === 'inactive') {
                action = 'active';
                start += limit;
                setTimeout(() => loadMoreOptions(limit, start), 800);
            }
        });

        // 选中选项的逻辑
        $(document).on('click', '.custom-select-option', function() {
            const selectedText = $(this).text();
            const selectedValue = $(this).data('value');
            $('#selectTrigger').text(selectedText);
            $('#load_data').hide();
            isDropdownOpen = false;
            // 可选：将选中值存入隐藏input用于表单提交
            // $('<input>').attr({ type: 'hidden', name: 'selected_option' }).val(selectedValue).appendTo('form');
        });

        // 点击页面其他区域关闭下拉框
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.custom-select-container').length) {
                $('#load_data').hide();
                isDropdownOpen = false;
            }
        });
    });
</script>

方案2：原生Select的妥协方案（体验有限）

如果必须使用原生<select>，可以通过监听选项的选中事件，当用户选中倒数第N个选项时触发加载。这种方法无法监听真正的滚动，只能依赖用户的选中操作：

修改后的JS代码

$(document).ready(function() {
    var limit = 50;
    var start = 0;
    var action = 'inactive';

    function load_country_data(limit, start) {
        $.ajax({
            url: "fetch.php",
            method: "POST",
            data: { limit: limit, start: start },
            cache: false,
            success: function(data) {
                $('#load_data').append(data);
                if (data == '') {
                    $('#load_data_message').html("<button type='button' class='btn btn-info'>没有更多数据</button>");
                    action = 'active';
                } else {
                    $('#load_data_message').html("<button type='button' class='btn btn-warning'>加载中...</button>");
                    action = "inactive";
                }
            }
        });
    }

    // 加载初始数据
    if (action == 'inactive') {
        action = 'active';
        load_country_data(limit, start);
    }

    // 监听select的change事件，选中倒数第5个选项时加载更多
    $('#load_data').on('change', function() {
        const totalOptions = $(this).find('option').length;
        const selectedIndex = this.selectedIndex;
        // 当选中的选项位置距离底部不足5个时触发加载
        if (totalOptions - selectedIndex <= 5 && action === 'inactive') {
            action = 'active';
            start += limit;
            setTimeout(() => load_country_data(limit, start), 1000);
        }
    });
});

方案对比

方案1：完全自定义下拉组件，支持真正的滚动加载，UI可定制，体验流畅，是推荐的解决方案。
方案2：基于原生Select，实现成本低，但只能通过选中触发加载，无法监听滚动行为，体验较差，适合对UI和交互要求不高的场景。

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

如何检测下拉框Options滚动的scrollTop实现AJAX加载更多数据？

问题描述 #

我的HTML代码 #

我的JS代码 #

我的PHP代码（fetch.php） #

解决方案 #

方案1：自定义下拉组件（推荐） #