I have three pages on my website, but when I resize the browser window, the pages don’t behave consistently. When I resize the leftmost page, during resize only that page is visible on the screen, and that’s exactly what I want.
However, when I resize the middle or rightmost page, for a moment it shows the previous or next page and when I resize the rightmost page fastly (making small and wide) it is going to the midddle page.
The leftmost page works fine for me, and I want the other pages to behave the same way. How can I achieve that?
You can test the pages with making the browser smaller and wider with the mouse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
scroll-behavior: smooth;
box-sizing: border-box;
font-family: 'avenir_nextdemi_bold';
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
/*makes scroll disable on the whole page*/
/*overflow-y: hidden;*/
overflow-x: hidden;
}
::-webkit-scrollbar {
display: none;
}
.wrapper {
display: flex;
flex-direction: row;
/*if you want to add more pages turn the width to 400,500 etc..*/
width: 300vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
/*Main settings*/
.slide {
width: 100vw;
height: 100vh;
}
.one {
background: orange;
border: solid 0.5em green;
}
.two {
background: blue;
border: solid 0.5em red;
}
.three {
background: yellow;
border: solid 0.5em yellow;
}
.active {
border-color: black;
}
p{
font-size:4rem;
color:white;
margin-top:5em;
text-align:center;
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="wrapper">
<!--
===============
Left page
===============
-->
<div id="pageleft" class="slide one active">
<p>
left page
</p>
</div>
<!--
===============
End left page
===============
-->
<!--
===============
Middle page
===============
-->
<div id="middle" class="slide two">
<p>
middle page
</p>
</div>
<!--
===============
End middle page
===============
-->
<!--
===============
Right page
===============
-->
<div id="pageright" class="slide three ">
<p>
right page
</p>
</div>
<!--
===============
End right page
===============
-->
</div>
</div>
<script>
// Get all the slides
const slides = document.querySelectorAll('.slide');
// Create an intersection observer
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Remove the active class from all the slides
slides.forEach(slide => {
slide.classList.remove('active');
});
// Add the active class to the intersecting slide
entry.target.classList.add('active');
}
});
}, { threshold: 0.5 }); // The threshold value determines when the intersection is detected
// Add the observer to each slide
slides.forEach(slide => {
observer.observe(slide);
});
// Add a resize event listener to the window object
window.addEventListener('resize', () => {
// Find the current active slide
const activeSlide = document.querySelector('.slide.active');
// Scroll to the active slide
activeSlide.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
});
</script>
</body>
</html>I have changed the threshold from 0.5 to 1 but it dind’t help for
2
Answers
I think the issue you are experiencing is because when you resize the page, you are changing the viewport width. In the current code, the width of each page is set to 100vw, which means that it is taking up the entire viewport width. As a result, when you resize the page, the width of the viewport changes, and the width of the pages change as well.
To fix this issue, you can set a fixed width for each page, such as 1000px, and then use media queries to adjust the width of the page to the viewport width for different screen sizes. Here’s an example:
With this code, the width of each page is set to 1000px, which will remain fixed when you resize the page. For smaller screen sizes, the width of the page adjusts to the viewport width using a media query. You can adjust the breakpoints and the width of the pages as needed for your site.
I hope this helps!
If you want to make all pages behave like the leftest page, you can modify the code to add a resize event listener that scrolls to the active slide. Here’s an updated code that should achieve the behavior you want:
In this code, the resize event listener scrolls the window to the position of the active slide when the window is resized. This should ensure that only the active slide is visible on the screen during resize. Note that this code assumes that all pages have the same width as the viewport width. If the pages have a different width, you will need to adjust the code to scroll to the correct position.