Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menghalang Menatal Keseluruhan Halaman Apabila Mengklik Elemen Di Dalam Div Boleh Tatal?

Bagaimana untuk Menghalang Menatal Keseluruhan Halaman Apabila Mengklik Elemen Di Dalam Div Boleh Tatal?

Susan Sarandon
Lepaskan: 2024-10-26 15:41:30
asal
960 orang telah melayarinya

How to Prevent Scrolling the Entire Page When Clicking an Element Inside a Scrollable Div?

Cara Menatal Dalam Div Boleh Tatal

Apabila mengklik pada elemen dalam div yang ditatal, anda mungkin menghadapi isu di mana keseluruhan halaman tatal bukan hanya div. Untuk menyelesaikan masalah ini, manfaatkan langkah berikut:

  1. Kira offset menegak elemen yang dikehendaki berbanding div induknya:
<code class="javascript">var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;</code>
Salin selepas log masuk
  1. Gunakan scrollTop ke tatal div ke kedudukan yang ditentukan:
<code class="javascript">document.getElementById('scrolling_div').scrollTop = topPos;</code>
Salin selepas log masuk

Sebagai alternatif, untuk prototaip pelaksanaan JS:

<code class="javascript">var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];</code>
Salin selepas log masuk

Pendekatan ini memastikan bahawa div menatal untuk memaparkan elemen yang dikehendaki di bahagian atas atau sejauh mungkin ke bawah jika ia tidak kelihatan secara lalai.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Menatal Keseluruhan Halaman Apabila Mengklik Elemen Di Dalam Div Boleh Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan