scrollbar: update in next frame

the high timeout caused glitches so we assume the width has been settled in the next animation frame + plus some surplus #470
This commit is contained in:
Sören Weber 2023-02-10 17:02:33 +01:00
parent 11e7df31a7
commit 8e4b7cddc5
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D

View file

@ -545,22 +545,22 @@ function initMenuScrollbar(){
// affect their size // affect their size
window.addEventListener('resize', function(){ window.addEventListener('resize', function(){
console.log("resize") console.log("resize")
pst && setTimeout( function(){ pst.update(); }, 400 ); pst && setTimeout( function(){ pst.update(); }, 10 );
psm && setTimeout( function(){ psm.update(); }, 400 ); psm && setTimeout( function(){ psm.update(); }, 10 );
psc && setTimeout( function(){ psc.update(); }, 400 ); psc && setTimeout( function(){ psc.update(); }, 10 );
}); });
// now that we may have collapsible menus, we need to call a resize // now that we may have collapsible menus, we need to call a resize
// for the menu scrollbar if sections are expanded/collapsed // for the menu scrollbar if sections are expanded/collapsed
document.querySelectorAll('#sidebar .collapsible-menu input.toggle').forEach( function(e){ document.querySelectorAll('#sidebar .collapsible-menu input.toggle').forEach( function(e){
e.addEventListener('change', function(){ e.addEventListener('change', function(){
psm && setTimeout( function(){ psm.update(); }, 400 ); psm && setTimeout( function(){ psm.update(); }, 10 );
}); });
}); });
// bugfix for PS in RTL mode: the initial scrollbar position is off; // bugfix for PS in RTL mode: the initial scrollbar position is off;
// calling update() once, fixes this // calling update() once, fixes this
pst && setTimeout( function(){ pst.update(); }, 400 ); pst && setTimeout( function(){ pst.update(); }, 10 );
psm && setTimeout( function(){ psm.update(); }, 400 ); psm && setTimeout( function(){ psm.update(); }, 10 );
psc && setTimeout( function(){ psc.update(); }, 400 ); psc && setTimeout( function(){ psc.update(); }, 10 );
// finally, we want to adjust the contents end padding if there is a scrollbar visible // finally, we want to adjust the contents end padding if there is a scrollbar visible
window.addEventListener('resize', adjustContentWidth ); window.addEventListener('resize', adjustContentWidth );
@ -668,7 +668,7 @@ function showToc(){
var b = document.querySelector( 'body' ); var b = document.querySelector( 'body' );
b.classList.toggle( 'toc-flyout' ); b.classList.toggle( 'toc-flyout' );
if( b.classList.contains( 'toc-flyout' ) ){ if( b.classList.contains( 'toc-flyout' ) ){
pst && setTimeout( function(){ pst.update(); }, 400 ); pst && setTimeout( function(){ pst.update(); }, 10 );
pst && pst.scrollbarY.focus(); pst && pst.scrollbarY.focus();
document.querySelector( '.toc-wrapper ul a' ).focus(); document.querySelector( '.toc-wrapper ul a' ).focus();
document.addEventListener( 'keydown', tocEscapeHandler ); document.addEventListener( 'keydown', tocEscapeHandler );
@ -882,7 +882,7 @@ function mark() {
parent = parent.parentNode; parent = parent.parentNode;
} }
} }
psm && setTimeout( function(){ psm.update(); }, 400 ); psm && setTimeout( function(){ psm.update(); }, 10 );
} }
window.relearn.markSearch = mark; window.relearn.markSearch = mark;
@ -970,7 +970,7 @@ function unmark() {
var highlighted = document.querySelectorAll( '.highlightable' ); var highlighted = document.querySelectorAll( '.highlightable' );
unhighlight( highlighted, { element: 'mark' } ); unhighlight( highlighted, { element: 'mark' } );
psm && setTimeout( function(){ psm.update(); }, 400 ); psm && setTimeout( function(){ psm.update(); }, 10 );
} }
function unhighlight( es, options ){ function unhighlight( es, options ){