如何在 JavaScript 中监听 `select` 元素滚动到底部？

2024-04-08 03:43:56

## 使用 scroll() 事件轻松监听 select 元素滚动位置

简介

使用 scroll() 事件可以轻松监听元素的滚动位置，包括 select 元素。通过这种方式，我们可以检测 select 元素是否已滚动到底部，并相应地采取动作，例如加载更多数据。

修改后的代码

为了实现我们的目标，我们对现有的代码进行了一些修改：

$(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);
    }

    $('#load_data').scroll(function() {
        // 滚动到底部时加载更多数据
        if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
            if (action == 'inactive') {
                action = 'active';
                start = start + limit;
                setTimeout(function() {
                    load_country_data(limit, start);
                }, 1000);
            }
        }
    });
});