SoFunction
Updated on 2025-04-04

Solving the scroll penetration problem caused by vue pop-up

Recently, I encountered some small problems during the development process (it seems that there are always so many problems), but I have not had much time to optimize and solve them. Programmers cannot be kidnapped by the business. If you have time, spend some time on code and start this vue attempt.

First define a global style:

.noscroll{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

Create a file and define several methods:

export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return ()
}
 
export function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }
  if( === ''){
     += className
  }else{
    let newClass = (' ')
    (className)
     = (' ')
  }
  
}

export function removeClass(el,className) {
  if (hasClass(el, className)) {
     = (new RegExp('(\\s|^)' + className + '(\\s|$)'), '');
  };
}

Get the DOM of the <html> tag:

 = ('html')[0];

When the pop-up box pops up:

addClass(, 'noscroll');

When the pop-up box is closed

removeClass(, 'noscroll');

This will solve the problem of rolling penetration ~

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.