the scrollable element translate property isn't responsively matching the window's right side (doesn't stick to the right side as if the transform drags the element left and right)when the window is resized if the size is getting smaller there is a blank portion created or when getting bigger scrollable element goes overflow and the scrolling doesn't work on it. elements inside scrollable are vw based width and the heights are all 100vh www.whitemorality.ir
.container-fixed {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
overflow: hidden;
}
.scrollable {
position: absolute;
top: 0;
left: 0;
display: flex;
height: 100vh;
flex-direction: row;
width: auto;
}
<body>
<div class="container-fixed">
<div class="scrollable">
</div>
</div>
<script>
window.addEventListener('load', setHeight);
window.addEventListener('resize', setHeight);
const scrollable = document.querySelector(".scrollable");
let current = 0;
let target = 0;
let ease = 0.04;
function setHeight() {
let scrollableWidth = scrollable.getBoundingClientRect().width;
let bodyheight = scrollableWidth - (window.innerWidth - window.innerHeight);
document.body.style.height = `${Math.max(0, bodyheight)}px`;
}
function lerp(start, end, amount) { return start * (1 - amount) + end * amount };
function animate() {
target = window.scrollY ;
current = lerp(current, target, ease);
scrollable.style.transform = `translateX(${-current.toFixed(0)}px)`;
requestAnimationFrame(animate);
};
</script>
</body>
</html>