Make sure the webpage remains fixed in place when the modal is active, but ensure that the scrollbar is still visible

Question

Make sure the webpage remains fixed in place when the modal is active, but ensure that the scrollbar is still visible

My goal is to prevent page scrolling when a modal is opened without causing the scrollbar to disappear or the content to shift abruptly. I want to freeze the scroll position I'm currently at, keep the scrollbar visible, and ensure that features like 'hide on scroll' on the header do not trigger under the modal's dark underlay. How can I achieve this without any unwanted side effects?

I've experimented with different methods, including applying the following styles directly to the <body>:

position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
overflow-y: scroll;

While this approach prevents scrolling and keeps the scrollbar visible, using position: fixed; causes the viewport to jump to the top when the modal is opened, which is not desirable.

In my Vue project, the template in my App.vue file is structured as follows:

<template>
    <div>
        <AppModal></AppModal>
        <AppHeader></AppHeader>
        <AppMain></AppMain>
        <AppFooter></AppFooter>
    </div>
</template>

I am searching for a concise solution that does not require using JavaScript.

html css vue.js vuejs3 modal-dialog

Answer 1

Answer №1

To replicate the issue of content shifting, it is necessary to have a fixed header, which was not specified in your initial question. If the body has an overflow-y:hidden property, the scrollbar will disappear, leading to the content shifting in the header.

The solution involves placing the header inside a container with a conflicting overflow-y:scroll property that will counteract the disappearance of the scrollbar in the body.

btn.onclick = btn3.onclick = function(ev) {
  document.body.classList.add("fixed")
}

btn2.onclick = function(ev) {
  document.body.classList.remove("fixed")
}


// hide on scroll
let lastScrollY = window.scrollY;
var header_container = document.querySelector(".header-container");
const handleScroll = () => {
  if (lastScrollY < window.scrollY && window.scrollY >= 50) {
    header_container.classList.add("hidden")
  } else {
    header_container.classList.remove("hidden")
  }
  lastScrollY = window.scrollY;
};

window.addEventListener('scroll', handleScroll);

body {
  overflow-y: scroll;
  margin: 0;
}

body.fixed {
  overflow-y: hidden;
}

.header-container {
  top: 0;
  position: sticky;
  width: 100%;
  transform: translateY(0);
  transition: transform 0.3s;
  
  /* meh - not supported in opera? */
  scrollbar-color: rgba(255, 255, 0, 0.75) rgba(255, 255, 0, 0.75);
}

.header-container.hidden {
  transform: translateY(-100%);
}

body.fixed .header-container {
  overflow-y: scroll;
}

body .modal {
  display: none;
}

body.fixed .modal {
  display: block;
}

.header {
  width: 100%;
  text-align: center;
  padding: 25px 0;
  top: 0;
  background: yellow;
  box-shadow: 0 0 10px purple;
}

.modal {
  padding: 20px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1;
}

<body>


  <div class="header-container">
    <div class="header">
      header, <button id="btn3">open modal</button>

    </div>
  </div>

  <h1>hello world, please scroll and/or open modal</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>

  <button id="btn">open modal</button>


  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>

  <div class="modal">
    <h2>hello i am modal</h2>
    <button id="btn2">close</button>
  </div>

</body>

Answer 2

To replicate the issue of content shifting, it is necessary to have a fixed header, which was not specified in your initial question. If the body has an overflow-y:hidden property, the scrollbar will disappear, leading to the content shifting in the header.

The solution involves placing the header inside a container with a conflicting overflow-y:scroll property that will counteract the disappearance of the scrollbar in the body.

btn.onclick = btn3.onclick = function(ev) {
  document.body.classList.add("fixed")
}

btn2.onclick = function(ev) {
  document.body.classList.remove("fixed")
}


// hide on scroll
let lastScrollY = window.scrollY;
var header_container = document.querySelector(".header-container");
const handleScroll = () => {
  if (lastScrollY < window.scrollY && window.scrollY >= 50) {
    header_container.classList.add("hidden")
  } else {
    header_container.classList.remove("hidden")
  }
  lastScrollY = window.scrollY;
};

window.addEventListener('scroll', handleScroll);

body {
  overflow-y: scroll;
  margin: 0;
}

body.fixed {
  overflow-y: hidden;
}

.header-container {
  top: 0;
  position: sticky;
  width: 100%;
  transform: translateY(0);
  transition: transform 0.3s;
  
  /* meh - not supported in opera? */
  scrollbar-color: rgba(255, 255, 0, 0.75) rgba(255, 255, 0, 0.75);
}

.header-container.hidden {
  transform: translateY(-100%);
}

body.fixed .header-container {
  overflow-y: scroll;
}

body .modal {
  display: none;
}

body.fixed .modal {
  display: block;
}

.header {
  width: 100%;
  text-align: center;
  padding: 25px 0;
  top: 0;
  background: yellow;
  box-shadow: 0 0 10px purple;
}

.modal {
  padding: 20px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1;
}

<body>


  <div class="header-container">
    <div class="header">
      header, <button id="btn3">open modal</button>

    </div>
  </div>

  <h1>hello world, please scroll and/or open modal</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>

  <button id="btn">open modal</button>


  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>
  <h1>hello world</h1>
  <p>sdflkjsdfl kjsf</p>

  <div class="modal">
    <h2>hello i am modal</h2>
    <button id="btn2">close</button>
  </div>

</body>

Make sure the webpage remains fixed in place when the modal is active, but ensure that the scrollbar is still visible

Answer №1

Similar questions

Tips for using JavaScript to magnify a specific point on a webpage

Imitate the act of pasting content into a Textarea using JavaScript

Acquire HTML using Java - certain characters are not retrieved accurately

Optimal strategies for designing navigation bars on contemporary websites

"Within the node.js framework, the search/query section of the URL appears

Navigating to the bottom of a specific element by scrolling

Navigating through content using jQuery scroll bar

Reopen a Kendo UI dialog

Update the content of a div and refresh it when a key on the keyboard is pressed

Achieving functionality with dropdown menus in jQuery

CSS loop to centrally align divs

How can I emphasize the React Material UI TextField "Cell" within a React Material UI Table?

"Customize the number of items displayed per page with Bootstrap Vue's perPage

Guide to implementing Swiper.js (version 8+) within Nuxt.js (2.15.8)

Ways to prevent animations from displaying solely in IE

Leveraging scrapy for pinpointing the accurate information within tables

The VueJS Chosen directive fails to refresh when new options are selected

Deactivating the drag feature when setting the duration of a new event in FullCalendar

A step-by-step guide on creating a live crud application with vuex and socketio

How does margin:auto differ from using justify-content and align-items center together?