js menyedari bahawa bar skrol menatal ke kedudukan tertentu dan secara automatik mencari teknik tr

Untuk melaksanakan jadual dengan bar skrol dan mencari tr tertentu, ia sebenarnya sangat mudah dengan hanya beberapa baris kod js Kandungan khusus adalah seperti berikut

kod js

<strong><script type="text/javascript"> 
 function  test(){ 
    var $objTr = $("#location"); //找到要定位的地方  tr 
    $objTr.css("background-color","lightgray"); //设置要定位地方的css 
    var objTr = $objTr[0]; //转化为dom对象 
    $("#dataDiv").animate({scrollTop:objTr.offsetTop},"slow"); //定位tr 
  } 
</script></strong>

Salin selepas log masuk

html

<body> 
    <h1>定位</h1> 
    <p id="dataDiv" style="overflow-x:hidden;overflow-y:auto;height:400px;width:450px;"> 
      <table id="tableId" style="width:400px;background-color:yellow" align="center" border="0"> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr <span style="color:#FF0000;">id="location"</span>><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
      </table> 
  </p> 
  <input type="button" value="定位到一行" onclick="test()"/> 
 </body>

Salin selepas log masuk

Walaupun ia hanya beberapa baris kod, anda perlu memahaminya dengan teliti. Anda mesti biasa dengan penggunaan animasi, scrollTop dan maksud .offsetTop untuk menjadi selesa.

1. Arahan untuk menggunakan animasi:

Kaedah animate() melaksanakan animasi tersuai set sifat CSS.

Kaedah ini menukar elemen dari satu keadaan ke keadaan lain melalui gaya CSS. Nilai sifat CSS berubah secara beransur-ansur, membolehkan anda mencipta kesan animasi. Hanya nilai angka boleh dianimasikan (cth. "margin:30px"). Nilai rentetan tidak boleh dianimasikan (seperti "warna latar:merah").

2. scrollTop

atribut scrollTop

Dalam sesetengah kes, ketinggian "kandungan dalam elemen" akan melebihi ketinggian "elemen itu sendiri." kepada "kandungan dalam elemen". Ketinggian bahagian kandungan elemen yang melebihi sempadan atas elemen.

Penjelasan: Nilai ketinggian elemen dalam ialah 300px > Nilai ketinggian elemen luar ialah 200px, jadi "kandungan unsur luar" (iaitu, "elemen dalam") tidak dapat dipaparkan sepenuhnya dan elemen luar mempunyai limpahan ditetapkan kepada auto, jadi elemen luar Gelangsar menegak akan muncul di sebelah kanan elemen lapisan Dalam keadaan awal, "sempadan atas unsur dalam" dan "sempadan atas unsur luar" bertepatan antara satu sama lain, dan tiada kandungan yang melebihi "sempadan atas unsur luar" Pada masa ini, nilai atribut scrollTop ialah 0.

Apabila blok tatal diseret ke bawah, kandungan yang melebihi "sempadan atas unsur luar" akan meningkat secara beransur-ansur dan nilai tatal atas adalah sama dengan ketinggian bahagian yang berlebihan ini. Apabila blok skrol diseret ke bahagian bawah, "sempadan bawah elemen dalam" dan "sempadan bawah elemen luar" bertepatan Pada masa ini, ketinggian kandungan melebihi "sempadan atas elemen luar". = 300px-200px= 100px, iaitu nilai scrollTop pada masa ini.

3..offsetTop, offsetLeft, dsb.

Anggap obj ialah kawalan HTML.

obj.offsetTop merujuk kepada kedudukan obj dari atas atau kepada kawalan atas, integer, unit piksel.

obj.offsetLeft merujuk kepada kedudukan obj dari kiri atau kawalan atas, integer, unit piksel.

obj.offsetWidth merujuk kepada lebar kawalan obj itu sendiri, integer, unit piksel.

obj.offsetHeight merujuk kepada ketinggian kawalan obj itu sendiri, integer, unit piksel.

offsetParent

Harta offsetParent mengembalikan rujukan kepada objek yang paling hampir dengan elemen yang memanggil offsetParent (yang paling hampir dalam hierarki yang mengandungi) dan merupakan bekas yang telah diletakkan menggunakan elemen CSS. Jika elemen kontena ini tidak diletakkan di kedudukan CSS, nilai atribut offsetParent ialah rujukan kepada elemen akar (elemen html dalam mod keserasian standard; elemen badan dalam mod pemaparan aneh). Apabila style.display elemen kontena ditetapkan kepada "tiada" (kecuali untuk IE dan Opera), sifat offsetParent mengembalikan nol.

Sintaks: parentObj = element.offsetParent

Pembolehubah: parentObj ialah rujukan kepada elemen, di mana offset unsur semasa dikira.