Scroll on Mobile Devices

General
1

Trying to control user scroll on mobile devices

I’m trying to make a website that show 4 or 5 divs with some content inside of them but when struggling to control the scroll on mobile. The user can only see one div at a time and my idea is to make the next or previous div appear with the scroll using a fade animation(not relevant) is there any easy way to control user scroll on mobile devices? And one more thing, my address bar on browser is dissapearing when I scroll down. If any of you can help me, thank you

<div class="div-container active">Div 1</div>
    <div class="div-container">Div 2</div>
    <div class="div-container">Div 3</div>
    <div class="div-container">Div 4</div>
    <div class="div-container">Div 5</div>
2

HTML

<div class="div-container">
  <div class="content">Div 1</div>
</div>
<div class="div-container">
  <div class="content">Div 2</div>
</div>
<div class="div-container">
  <div class="content">Div 3</div>
</div>
<div class="div-container">
  <div class="content">Div 4</div>
</div>
<div class="div-container">
  <div class="content">Div 5</div>
</div>

CSS

.div-container {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.content {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.active .content {
  opacity: 1;
}

JavaScript

const divContainers = document.querySelectorAll('.div-container');
let activeIndex = 0;

window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY;
  const containerHeight = divContainers[0].offsetHeight;

  if (scrollPosition >= containerHeight * activeIndex && scrollPosition < containerHeight * (activeIndex + 1)) {
    return; // No change needed
  }

  if (scrollPosition < containerHeight * activeIndex) {
    activeIndex--;
  } else {
    activeIndex++;
  }

  divContainers[activeIndex].classList.add('active');
  divContainers[activeIndex - 1].classList.remove('active');
});

Explanation:

  1. HTML Structure: Each div-container now has a nested content div for easier styling and JavaScript manipulation.
  2. CSS Styling:
  • div-container : Sets the height to 100% of the viewport, hides overflow, and positions elements relatively.
  • .content : Initially has opacity: 0 , making it invisible. The transition property enables smooth fading.
  • .active .content : Sets opacity: 1 for the active content div, making it visible.
  1. JavaScript Logic:
  • Calculates the scroll position and compares it to the height of the current container.
  • If the scroll position falls within the range of the current container, no changes are made.
  • If the scroll position is less than the current container’s top, the active index is decreased.
  • If the scroll position is greater than the current container’s bottom, the active index is increased.
  • The active class is added to the new active container and removed from the previous one, triggering the CSS transition.

Addressing Specific Issues:

  • Controlling User Scroll: The JavaScript code ensures that only one div-container is visible at a time, preventing users from scrolling freely.
  • Address Bar Disappearing: This behavior is likely due to browser settings or a CSS rule that hides the address bar on scroll. To prevent this, you can add the following CSS rule:
    CSS
body {
  overflow-x: hidden;
}