Die JQuery-Seite verhindert das Scrollen der Seite-Front-End-Fragen und Antworten-php.cn

Die JQuery-Seite verhindert das Scrollen der Seite

WBOY

Freigeben： 2023-05-14 09:58:37

Original

1937 Leute haben es durchsucht

Bei der Entwicklung von Webseiten kann es vorkommen, dass wir unter bestimmten Umständen das Scrollen von Seiten verbieten müssen, z. B. bei Popup-Modalboxen, Popup-Menüs usw. In diesem Fall können wir jQuery verwenden, um das Scrollen der Seite zu deaktivieren. Im Folgenden wird detailliert beschrieben, wie Sie mit jQuery das Scrollen von Seiten verhindern können.

1. Scrollen herunterladen und deaktivieren

Zunächst müssen Sie die Scrollleiste herunterladen. Wir können den folgenden Code verwenden, um die Bildlaufleiste abzurufen:

var scrollTop = $(window).scrollTop();

Nach dem Login kopieren

Unter anderem ist scrollTop() die Methode, die in jQuery verwendet wird, um die Position der Bildlaufleiste zu ermitteln. Nachdem wir den Wert von scrollTop erhalten haben, können wir den folgenden Code verwenden, um das Scrollen der Seite zu verhindern:

$('body').addClass('noscroll').css({
   'top': -scrollTop + 'px'
 });

Nach dem Login kopieren

Hier haben wir dem Body-Element der Seite eine benutzerdefinierte Klasse noscroll hinzugefügt und das Top-Attribut festgelegt, um die Position des Body-Elements zu verschieben nach oben. Dadurch wird das Scrollen der Seite deaktiviert. Es ist zu beachten, dass zur Vermeidung von Seitenflackern beim Deaktivieren des Seitenscrollens der scrollTop-Wert auf eine negative Zahl gesetzt werden muss. Ebenso können wir den folgenden Code verwenden, um das Scrollen der Seite wiederherzustellen:

$('body').removeClass('noscroll');
$(window).scrollTop(scrollTop);

Nach dem Login kopieren

Hier entfernen wir die Klasse noscroll für das Body-Element der Seite und verwenden die scrollTop()-Methode, um die Position der Bildlaufleiste wieder auf festzulegen den ursprünglichen Wert, damit das Scrollen der Seite wiederhergestellt werden kann.

2. Vermeiden Sie Änderungen der Bildlaufleistenbreite.

Nach dem Deaktivieren des Seitenscrollens tritt ein Problem auf: Das Verschwinden der Bildlaufleiste führt zu einer Verkleinerung der Seitenbreite, was zu Seitenzittern führt. Um dieses Problem zu lösen, können wir der HTML-Struktur ein Platzhalterelement hinzufügen. Wenn das Scrollen der Seite deaktiviert ist, wird die Breite des Elements auf die Breite der Bildlaufleiste der aktuellen Seite eingestellt, um ein Verwackeln der Seite zu vermeiden . Hier ist der Code zum Hinzufügen eines Platzhalterelements:

<body>
  <div class="scrollbar-width"></div>
  <!-- 页面其余结构 -->
</body>

Nach dem Login kopieren

Als Nächstes können wir den folgenden Code verwenden, um die Breite der Bildlaufleiste zu ermitteln:

function getScrollbarWidth() {
  var outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);
  var widthNoScroll = outer.offsetWidth;
  // force scrollbars
  outer.style.overflow = 'scroll';
  // add innerdiv
  var inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);        
  var widthWithScroll = inner.offsetWidth;
  // remove divs
  outer.parentNode.removeChild(outer);
  return widthNoScroll - widthWithScroll;
};

Nach dem Login kopieren

Hier verwenden wir eine Funktion, um die Breite der Bildlaufleiste zu ermitteln. Zuerst wird ein div-Element erstellt und auf Sichtbarkeit: ausgeblendet und Breite: 100 Pixel formatiert. Legen Sie dann den msOverflowStyle-Stil auf die Bildlaufleiste fest (für WinJS-Anwendungen) und hängen Sie ihn an das Textelement des Dokuments an. Als nächstes verwenden Sie die Eigenschaft innerWidth, um die Breite der Bildlaufleiste zu ermitteln. Stellen Sie als Nächstes den Überlaufstil auf Scrollen ein und erstellen Sie ein neues inneres Div-Element, um das ursprüngliche äußere Div-Element zu füllen. Setzen Sie abschließend die innere Breite auf 100 % und erhalten Sie deren innere Breite. Als letztes müssen Sie das div-Element löschen und die nächste Breite von der vorherigen Breite subtrahieren, um die Breite der Bildlaufleiste zu erhalten.

3. Vollständiger Code

Abschließend kombinieren wir die oben eingeführten Codes, um den vollständigen Code zum Deaktivieren des Seitenscrollens zu erhalten:

var scrollbarWidth = getScrollbarWidth();
var scrollTop = $(window).scrollTop();

// 禁用滚动条
$('body').addClass('noscroll').css({
  'top': -scrollTop + 'px',
  'padding-right': scrollbarWidth + 'px'
});

// 恢复滚动条
$('body').removeClass('noscroll').css({
  'padding-right': ''
});
$(window).scrollTop(scrollTop);


function getScrollbarWidth() {
  var outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);
  var widthNoScroll = outer.offsetWidth;
  // force scrollbars
  outer.style.overflow = 'scroll';
  // add innerdiv
  var inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);        
  var widthWithScroll = inner.offsetWidth;
  // remove divs
  outer.parentNode.removeChild(outer);
  return widthNoScroll - widthWithScroll;
};

Nach dem Login kopieren

Die oben genannten Schritte sind alle Schritte, um jQuery zum Deaktivieren des Seitenscrollens zu verwenden. Mit dieser Methode können wir das Scrollen der Seite beim Entwickeln von Webseiten besser steuern und einige unerwartete Situationen vermeiden.

Das obige ist der detaillierte Inhalt vonDie JQuery-Seite verhindert das Scrollen der Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!