nice! thanks for posting, this is the most effective solve I've found.
something thing I noticed after implementing this solution is that it can trigger the fabled 'jumpy scroll', referenced in the stack overflow post I'm sure we all landed on before finding this post. stackoverflow.com/questions/371122...
as a workaround I created two css variables, one for the fixed "starting" height, and another "dynamic" height that is only used for the shopping cart, mobile menu and other fixed-position elements that require 100% screen height.
pasted below in case someone else runs into the same issue!
// set up css var for starting app height. this will not change on resize so we can avoid the jumpy scroll issue
const appHeight = () => {
const doc = document.documentElement;
doc.style.setProperty('--app-height', ${window.innerHeight/10}rem)
};
window.addEventListener('orientationchange', appHeight);
appHeight();
// set up css var for dynamic app height. this is just for the cart and mobile menu since they need to be fixed to size at all times.
nice! thanks for posting, this is the most effective solve I've found.
something thing I noticed after implementing this solution is that it can trigger the fabled 'jumpy scroll', referenced in the stack overflow post I'm sure we all landed on before finding this post. stackoverflow.com/questions/371122...
as a workaround I created two css variables, one for the fixed "starting" height, and another "dynamic" height that is only used for the shopping cart, mobile menu and other fixed-position elements that require 100% screen height.
pasted below in case someone else runs into the same issue!
// set up css var for starting app height. this will not change on resize so we can avoid the jumpy scroll issue
const appHeight = () => {
const doc = document.documentElement;
doc.style.setProperty('--app-height',
${window.innerHeight/10}rem)};
window.addEventListener('orientationchange', appHeight);
appHeight();
// set up css var for dynamic app height. this is just for the cart and mobile menu since they need to be fixed to size at all times.
const dynamicAppHeight = () => {
const doc = document.documentElement;
doc.style.setProperty('--dynamic-app-height',
${window.innerHeight/10}rem)};
window.addEventListener('resize', dynamicAppHeight);
dynamicAppHeight();