ホームページ > 記事 > ウェブフロントエンド > js は、スクロールバーが特定の位置までスクロールすることを認識し、特定の tr_javascript テクニックを自動的に見つけます。

js は、スクロールバーが特定の位置までスクロールすることを認識し、特定の tr_javascript テクニックを自動的に見つけます。

不言オリジナル: 2018-05-28 14:15:404938ブラウズ

スクロールバーを備えたテーブルを実装し、特定の tr を見つけることは、実際にはわずか数行の js コードで完了できます。具体的な内容は次のとおりです。

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>

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>

わずか数行のコードですが、しっかり理解する必要があります。快適に使用するには、animate、scrollTop、および .offsetTop の意味をよく理解しておく必要があります。

1. animate の使用手順:

animate() メソッドは、CSS プロパティセットのカスタムアニメーションを実行します。

このメソッドは、CSS スタイルを通じて要素をある状態から別の状態に変更します。 CSS プロパティ値は徐々に変化し、アニメーション効果を作成できます。アニメーション化できるのは数値のみです（例：「margin:30px」）。文字列値はアニメーション化できません（「background-color:red」など）。

2.scrollTop

scrollTop 属性

場合によっては、「要素内のコンテンツ」の高さが、scrollTop が参照する「要素自体」の高さを超えます。要素のコンテンツの上限を超える部分の高さ。

説明: 内側の要素の高さの値は 300px > 外側の要素の高さの値は 200px であるため、「外側の要素の内容」(つまり、「内側の要素」) を完全に表示することができず、外側の要素はオーバーフローが自動に設定されているため、外側の要素のレイヤー要素の右側に垂直スライダーが表示されます。初期状態では「内側の要素の上部境界」と「外側の要素の上部境界」は一致しており、「外側の要素の上部境界」を超える内容はありません。スクロールトップ属性は 0 です。

スクロールブロックを下にドラッグすると、「外側の要素の上端」を超える内容が徐々に増えていき、そのはみ出した部分の高さがscrollTopの値となります。スクロールブロックを下にドラッグすると、「内側要素の下枠」と「外側要素の下枠」が一致します。このとき、コンテンツの高さが「外側要素の上枠」を超えます。 = 300px-200px= 100px、これがこの時点のscrollTopの値です。

3..offsetTop、offsetLeft など

obj は HTML コントロールであると仮定します。

obj.offsetTop は、上からの obj の位置、または上位コントロール、整数、単位ピクセルを参照します。

obj.offsetLeft は、左または上のコントロールからの obj の位置、整数、単位ピクセルを参照します。

obj.offsetWidth は、obj コントロール自体の幅 (整数、単位ピクセル) を指します。

obj.offsetHeight は、obj コントロール自体の高さ (整数、単位ピクセル) を指します。

offsetParent

offsetParent プロパティは、offsetParent を呼び出す要素に最も近い (包含階層内で最も近い) オブジェクトへの参照を返し、CSS 要素を使用して配置されたコンテナです。このコンテナ要素が CSS で配置されていない場合、offsetParent 属性の値はルート要素 (標準互換モードの html 要素、奇妙なレンダリングモードの body 要素) への参照になります。コンテナ要素の style.display が「none」に設定されている場合 (IE と Opera を除く)、offsetParent プロパティは null を返します。

構文:parentObj = element.offsetParent

変数:parentObj は、現在の要素のオフセットが計算される要素への参照です。

css html NULL 整型 auto 字符串 JS 对象 display overflow margin background table tr

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery で 360 度のブラウザ画面切り替えエフェクトのスライドショーをシミュレート (デモソースコードのダウンロード付き)_jquery次の記事：jQuery で 360 度のブラウザ画面切り替えエフェクトのスライドショーをシミュレート (デモソースコードのダウンロード付き)_jquery

続きを見る

js は、スクロール バーが特定の位置までスクロールすることを認識し、特定の tr_javascript テクニックを自動的に見つけます。

関連記事

js は、スクロールバーが特定の位置までスクロールすることを認識し、特定の tr_javascript テクニックを自動的に見つけます。