Hallo,
in meinem Fall geht es darum im Chatverlauf ältere Chatnachrichten zu laden, das hat die Besonderheit das man hoch scrollen muss und der neue Content ebenfalls über dem alten (DOM) hinzugefügt wird.
Das Grundmodell lief gut (PC & Mobile) hatte jedoch die Schwachstelle das wenn der Nutzer den Scrollbalken feshält (PC) und nach oben schiebt und weiterhin festhält, ein xhr-event nach dem anderen gefeuert wird, weil auch nach dem Hinzufügen des Content die Position weiterhin top (0) ist (Scrollbar springt ja direkt wieder zum Cursor).
Eine Lösung wäre gewesen das festhalten der Scrollbar zu unterbrechen (gelang mir aber nur im Chrome).
Nun habe ich diese Lösung umgesetzt und hätte dazu gern etwas Feedback.
Nun habe ich die Möglichkeit in anderen Skripten stets abzufragen ob die Maustaste aktuell noch immer gehalten wird.
Dadurch kann das Scroll-Event entsprechend entscheiden was zu tun ist.
LG: Paykoman
in meinem Fall geht es darum im Chatverlauf ältere Chatnachrichten zu laden, das hat die Besonderheit das man hoch scrollen muss und der neue Content ebenfalls über dem alten (DOM) hinzugefügt wird.
Das Grundmodell lief gut (PC & Mobile) hatte jedoch die Schwachstelle das wenn der Nutzer den Scrollbalken feshält (PC) und nach oben schiebt und weiterhin festhält, ein xhr-event nach dem anderen gefeuert wird, weil auch nach dem Hinzufügen des Content die Position weiterhin top (0) ist (Scrollbar springt ja direkt wieder zum Cursor).
Eine Lösung wäre gewesen das festhalten der Scrollbar zu unterbrechen (gelang mir aber nur im Chrome).
Nun habe ich diese Lösung umgesetzt und hätte dazu gern etwas Feedback.
PHP-Code:
/** [-on (left)mouse down-] */
const omd = {
is: false,
events: [], // events die nach dem loslassen ausgeführt werden
busy: false,
run: function(){
// console.debug('mous is down', this.events);
this.exe( omd.events.shift() );
if( this.events.length == 0 ){ this.busy = false; }else{ this.run(); }
},
exe: async function(func){
func();
}
};
document.onmousedown = function(e){
console.debug('mous is down', e.button);
if( e.button == 0 ){ omd.is = true; }
};
document.onmouseup = function(e){
if( e.button == 0 ){
omd.is = false;
if( omd.events.length > 0 && !omd.busy ){ omd.busy = true; omd.run(); }
}
};
// der onScroll handler...
this.appear.sl = this.el.find('.messageWrapper').on('scroll', function(e){
// fetch for enable loadOldMsg
if( _this.loadMore === true && $(this).scrollTop() == 0 ){
if( !omd.is ){
_this.loadOldMsg();
}else{
// position ist top aber Maus noch immer gedrückt, also omd event hinzufügen und auf loslassen warten
if( omd.events.indexOf(_this.loadOldMsg) == -1 ){ omd.events.push(_this.loadOldMsg); }
}
}
});
Dadurch kann das Scroll-Event entsprechend entscheiden was zu tun ist.
LG: Paykoman
Kommentar