I am using pure javascript to loading data when scrolling over and over to the bottom of the page. My code works well in android phones. But it does not work in apple devices. And i do not know where is problem exactly. Here is my code:

let self = this
        this.scrollArea = document.getElementById("scrollable-product-area");
        
        $('#scrollable-product-area').on('scroll', function() {
            if(self.scrollArea.scrollTop + self.scrollArea.clientHeight  >= self.scrollArea.scrollHeight - 0.5){
                if(self.secilenKategori.length == 0 && self.secilenMarka.length == 0 && self.search === ""){
                    self.$store.commit("changePostPage",(self.$store.getters.getPostpage + 50));
                    self.$store.commit("changeScrollPosDashboard", self.scrollArea.scrollTop);
                    self.getUrunList();
                }
                else{
                    if(self.$store.getters.getUrunFilterNumber >= 50) {
                        self.$store.commit("changePostPage",(self.$store.getters.getPostpage + 50));
                        self.$store.commit("changeScrollPosDashboard", self.scrollArea.scrollTop);
                        self.urunFilter();
                    }                  
                }
            }
        })

This code inside mounted method. I am sending limits of data and page number to function for loading data.