Javascript滚动条翻页数据动态加载

一般分页是通过按钮触发的，最近有一个需求通过滚动条进行触发，随后做了这样一个动态加载的功能。
滚动条滚动到下侧，80%的位置，向后翻页；
滚动条滚动到上册，20%的位置，向前翻页。

代码部分

// 总的数据量，这个一般后台传过来
let total_count = 10
// 总页数，总的数据量除以页数
let total_page_count = Math.ceil(total_count / PAGE_SIZE)
let scroll_percentage
// 计算当前的比例，滚动条的进度
scroll_percentage = $('.scroll-down').scrollTop() / $('#table').height() * 100
// 向后翻页，滚动条进度大于80
if (scroll_percentage > 80) {
    if (commit_flg) return
    commit_flg = true
    start_page += 1
    if (start_page >= total_page_count) start_page = total_page_count
    if (start_page < total_page_count) {
        $.ajax({
            method: 'post',
            url: '**************',
            cache: true,
            data: {
                'startPage': start_page,
                'pageSize': PAGE_SIZE
            },
            success: function(res) {
                $('#table').html(res)
                commit_flg = false
            }
        })
    } else {
        commit_flg = false
    }
}
// 向前翻页，滚动条进度小于80
else if (scroll_percentage < 20) {
    if (commit_flg) return
    commit_flg = true
    if (start_page > 1) {
        $.ajax({
            method: 'post',
            url: '**************',
            cache: true,
            data: {
                'startPage': start_page - 1,
                'pageSize': PAGE_SIZE
            },
            success: function(res) {
                $('#table').html(res)
                commit_flg = false
                start_page -= 1
            }
        })
    } else {
        commit_flg = false
    }
}