scroll and scrollTop not working on touch devices

scroll and scrollTop not working on touch devices

On the homepage of the website I'm working on, using .scroll and .scrollTop functions, I'm trying to automatically load more content in real time. It's working on PC, but not on touch devices (phones & tablets), where it doesn't automatically load more content and stops just before loading data.

QUESTION: How can I replace the function below to better suit this functionality on phones & tablets with touch functionality?

Thank you.


 var page = 1;


            $(window).scroll(function () {
                $('#more').hide();
                $('#no-more').hide();

                if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                   $('#more').show();
                }
                if($(window).scrollTop() + $(window).height() == $(document).height()) {

                    $('#more').hide();
                    $('#no-more').hide();

                    page++;

                    var data = {
                        page_num: page
                    };

                    var actual_count = "<?php echo $actual_row_count; ?>";

                    if((page-1)* 23 > actual_count){
                        $('#no-more').show();
                    }else{
                        $.ajax({
                            type: "POST",
                            url: "data.php",
                            data:data,
                            success: function(res) {
                                $("#result").append(res);
                                console.log(res);
                            }
                        });
                    }

                }


            });