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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$("#map").css({
  marginTop: (scrollVal - $("#sidebar").offset().top) + "px"
});

Salin selepas log masuk

} 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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$("#map").css({
  position: "fixed",
  top: "0px"
});

Salin selepas log masuk