Bagaimana untuk Mengehadkan Julat Tatal Elemen Dalam Elemen Induk Bersaiz Dinamik?

Melaksanakan Had Ketinggian CSS untuk Elemen Tatal Menegak

Dalam antara muka interaktif, mengawal gelagat menatal elemen adalah penting untuk memastikan pengalaman pengguna dan kebolehcapaian. Satu senario sedemikian melibatkan pengehadan julat tatal elemen dalam elemen induk bersaiz dinamik.

Masalah:
Pertimbangkan reka letak di mana kita mempunyai DIV peta boleh tatal yang bergerak bersama-sama dengan tatal menegak pengguna, sambil mengekalkan penjajarannya dengan bar sisi tetap. Walau bagaimanapun, penatalan peta memanjang selama-lamanya, melebihi ketinggian port pandangan, menghalang pengguna daripada mengakses pengaki halaman.

Penyelesaian:
Untuk menangani isu ini dan mengehadkan penatalan peta, kami boleh memanfaatkan teknik CSS dan JavaScript.

Pertama sekali, kami mentakrifkan had ketinggian CSS untuk DIV peta menggunakan sifat "tinggi maksimum". Ini menetapkan ketinggian maksimum yang boleh dicapai oleh peta, memastikan ia tidak boleh melebihi ketinggian elemen induk.

peta {

tinggi maks: 500px;
}

Seterusnya, kami menggunakan JavaScript untuk menjejak kedudukan skrol pengguna dan melaraskan kedudukan peta dengan sewajarnya. Daripada menggunakan kaedah ".animate()" jQuery, kami memilih manipulasi CSS langsung atas sebab prestasi.

<br>$(window).scroll(function() {<br> var scrollVal = $(this).scrollTop();<br> if (scrollVal > $("#sidebar").offset().top) {</p>
<pre class="brush:php;toolbar:false">$("#map").css({
  marginTop: (scrollVal - $("#sidebar").offset().top) + "px"
});

} else {

$("#map").css({
  marginTop: "0px"
});

}
});

Dalam kod ini, kami mengira perbezaan antara kedudukan tatal dan bahagian atas offset bar sisi, dengan berkesan mengehadkan julat tatal peta dalam ketinggian bar sisi.

Pendekatan Alternatif:

Dalam sesetengah senario, pendekatan alternatif mungkin lebih disukai. Sebagai contoh, jika elemen peta mempunyai ketinggian tetap dan bar sisi mengembang secara dinamik, kami boleh memudahkan pengiraan.

<br>$(window).scroll(function() {<br> var scrollVal = $(this).scrollTop();<br> if (scrollVal > $(".header").height()) {</p>
<pre class="brush:php;toolbar:false">$("#map").css({
  position: "fixed",
  top: "0px"
});

} else {

$("#map").css({
  position: "static"
});

}
});

Dalam kes ini, kami menggunakan ketinggian pengepala sebagai titik rujukan kami, dengan anggapan ia kekal sebagai ketinggian tetap. Apabila kedudukan tatal melebihi ketinggian pengepala, kami membetulkan kedudukan peta ke bahagian atas port pandangan. Pendekatan ini memastikan peta menatal ke paparan pada masa yang sesuai, sambil kekal dalam ketinggian port pandangan.

Atas ialah kandungan terperinci Bagaimana untuk Mengehadkan Julat Tatal Elemen Dalam Elemen Induk Bersaiz Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!