halaman jquery melarang menatal halaman-Soal Jawab bahagian hadapan-php.cn

halaman jquery melarang menatal halaman

WBOY

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

asal

1940 orang telah melayarinya

Apabila membangunkan halaman web, kami mungkin menghadapi situasi di mana kami perlu melarang penatalan halaman dalam keadaan tertentu, seperti kotak modal timbul, menu timbul, dsb. Dalam kes ini, kita boleh menggunakan jQuery untuk melumpuhkan penatalan halaman. Berikut akan memperkenalkan secara terperinci cara menggunakan jQuery untuk mengelakkan penatalan halaman.

1. Mendapatkan dan melumpuhkan penatalan

Pertama, anda perlu mendapatkan bar skrol. Kita boleh menggunakan kod berikut untuk mendapatkan bar skrol:

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

Salin selepas log masuk

Antaranya, scrollTop() ialah kaedah yang digunakan dalam jQuery untuk mendapatkan kedudukan bar skrol. Selepas mendapat nilai scrollTop, kami boleh menggunakan kod berikut untuk melumpuhkan penatalan halaman:

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

Salin selepas log masuk

Di sini, kami menambah kelas tersuai noscroll pada elemen badan halaman dan menetapkan atribut teratas untuk dibuat elemen badan Gerakkan kedudukan ke atas untuk menghalang halaman daripada menatal. Perlu diingatkan bahawa untuk mengelakkan halaman berkelip, apabila melumpuhkan penatalan halaman, nilai scrollTop perlu ditetapkan kepada nombor negatif. Begitu juga, kami juga boleh menggunakan kod berikut untuk memulihkan penatalan halaman:

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

Salin selepas log masuk

Di sini, kami mengalih keluar kelas noscroll untuk elemen badan halaman dan menggunakan kaedah scrollTop() untuk menetapkan bar skrol kedudukan kembali kepada nilai asal, supaya tatal halaman boleh dipulihkan.

2. Elakkan perubahan lebar bar skrol

Selepas melumpuhkan skrol halaman, masalah akan timbul: kehilangan bar skrol akan menyebabkan lebar halaman mengecil, yang akan menyebabkan kegelisahan halaman. Untuk menyelesaikan masalah ini, kami boleh menambah elemen pemegang tempat pada struktur HTML Apabila penatalan halaman dilumpuhkan, lebar elemen ditetapkan pada lebar bar skrol halaman semasa, untuk mengelakkan halaman bergoncang. . Berikut ialah kod untuk menambah elemen pemegang tempat:

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

Salin selepas log masuk

Seterusnya, kita boleh menggunakan kod berikut untuk mendapatkan lebar bar skrol:

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;
};

Salin selepas log masuk

Di sini, kita menggunakan fungsi untuk mendapatkan lebar lebar bar skrol. Pertama, elemen div dicipta dan digayakan kepada keterlihatan: tersembunyi dan lebar: 100px. Kemudian, tetapkan gaya msOverflowStyle ke bar skrol (untuk aplikasi WinJS) dan tambahkannya pada elemen badan dokumen. Seterusnya, gunakan sifat innerWidth untuk mendapatkan lebar bar skrol. Seterusnya, tetapkan gaya limpahan untuk menatal dan buat bahagian dalam elemen div baharu untuk mengisi bahagian luar elemen div asal. Akhir sekali, tetapkan lebar dalam kepada 100% dan dapatkan Lebar dalamannya. Perkara terakhir yang perlu dilakukan ialah memadam elemen div dan menolak lebar seterusnya daripada lebar sebelumnya untuk mendapatkan lebar bar skrol.

3. Kod lengkap

Akhir sekali, kami menggabungkan kod yang diperkenalkan di atas untuk mendapatkan kod lengkap untuk melarang menatal halaman:

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;
};

Salin selepas log masuk

Di atas adalah menggunakan jQuery untuk melaksanakan halaman larangan Semua langkah untuk menatal. Dengan kaedah ini, kami boleh mengawal penatalan halaman dengan lebih baik semasa membangunkan halaman web dan mengelakkan beberapa situasi yang tidak dijangka.

Atas ialah kandungan terperinci halaman jquery melarang menatal halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!