ホームページ >ウェブフロントエンド >jsチュートリアル >より使用可能なフォーム - スクロール位置を制御します
より使用可能なフォーム - スクロール位置を制御します
- Jennifer Anistonオリジナル
- 2025-03-06 00:32:11343ブラウズ
私は、Webアプリケーションの使いやすさを改善し、改良する方法を常に探しています。特に、私は常に自分のフォームをより良くする方法を見つけようとしています。なぜなら、それに直面してみましょう。Webアプリケーションを構築しているなら、フォームを構築するつもりです。おそらく、あなたは多くのフォームを構築するつもりです。
フォームまたは一連のフォームを完成させようとしている平均的なユーザーを観察した人は誰でも、経験がしばしばイライラすることを知っています。フォームの使いやすさを改善するために追加の措置を講じます - マイナーな方法でも - そして、あなたは本当にあなたのアプリケーションのユーザーの親しみやすさを全体として高めることができます。
フォームの使いやすさを向上させるために使用できる手法の1つは、ポストバックの後にページスクロールを維持することです。この機能を検索ページで使用する場合があります。たとえば、ユーザーが結果を列でソートできるようにします。ページAの上部に検索パラメーターを受け入れ、以下の結果を表示する場合、特定の列で結果を並べ替えるたびに、パラメーターを過ぎて結果のパラメーターを下にスクロールする必要があることは非常に迷惑な場合があります。幸いなことに、私たちはこれについて何かをすることができます。ソリューション
このチュートリアルでは、フォームページがそれ自体に投稿したときにページのスクロール位置を簡単に維持する方法を示します。ここではColdFusionでこの例をコーディングしましたが、この手法は他の言語に簡単に移植できます。
このテクニックを機能させるために必要なことは2つだけです。 ページの現在のXおよびYスクロール座標をつかみ、現在のページに投稿したときに送信されるようにフォームに配置するために、JavaScriptを作成する必要があります。次に、それらのXおよびYスクロール座標を取得し、サーバーとクライアント側のスクリプトの組み合わせを介して、リロードしたらページのスクロール座標を設定する必要があります。ケーキ！フォームコード
ここでは、ベアボーンフォームを使用しているので、プロセスの仕組みの仕組みに明確に焦点を当てることができます。物事を機能させる方法がわかったら、この例を簡単に自分のニーズに合わせて、賢くなりたいと思っています。
このフォームページは、現時点では特別なことは何もしません。単にそれ自体に戻って、名前パラメーターを渡します。ページにスクロール可能なコンテンツがあるように段落と数字をコーディングしました。そのため、ページが垂直にどの程度スクロールしているかを判断するための視覚ガイドがあります（このスクリプトは、垂直と水平の両方の書籍を保持することに注意してください）。
スクロールの追跡
最初のステップは、xとyのスクロール値を取得してフォームに配置するためにJavaScriptを追加することです。これを行うには、フォームが送信されたときに現在のスクロール値をつかみ、隠された入力に渡すいくつかのJavaScriptとともに、フォームに2つの隠し入力を追加する必要があります。 savescrollcoordinates（）関数は、document.all.allのブラウザのサポートを調べて、正しい参照を使用してスクロール値をつかみ、それに応じてフォーム入力を更新します。この例では、onsubmit（）イベントハンドラーをフォームのイベントハンドラーを使用します。
この例では、スクロール値をテキストフィールドとして保存する隠されたフィールドをコード化したので、すぐに目がある場合は、フォームが送信される前に値がどのように変化するかを見ることができます。2番目のステップは、フォームで渡される値を取り、それらと一緒に何かをすることです。このためには、コールドフュージョンのタッチでJavaScriptの数行を追加する必要があります。まず、ページの上部に2つの追加のCFPARAMタグを挿入し、各ページのロードで動作するデフォルトのスクロール値をいくつか用意します。次に、scrolltocoordinates（）関数を定義してページスクロールを設定し、タグにonload（）イベントハンドラーを使用してページが読み込まれたときに呼び出します。
<cfparam name="FORM.name" default="Testing"> <br> <br> <html> <br> <head> <br> <title>Test</title> <br> </head> <br> <body> <br> <br> <form name="Form1" <br> method="POST" <br> action="<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>"> <br> <br> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <br> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <br> <br> <hr width="2000"> <br> <br> <nobr> <br> Name: <input type="text" name="name" value="<cfoutput>#FORM.name#</cfoutput>"> <br> <input type="submit" value="Submit"></nobr> <br> <br> <hr width="2000"> <br> <br> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <br> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <br> <br> </form> <br> <br> </body> <br> </html>
ここに、ユーザーがボタンをクリックしてフォームを送信したときに何が起こるかを説明するプレイごとの内訳があります。
<cfparam name="FORM.name" default="Testing"> <br>
<br>
<html> <br>
<head> <br>
<title>Test</title> <br>
<script language=javascript> <br>
function saveScrollCoordinates() { <br>
document.Form1.scrollx.value = (document.all)?document.body.scrollLeft:window.pageXOffset; <br>
document.Form1.scrolly.value = (document.all)?document.body.scrollTop:window.pageYOffset; <br>
} <br>
</script> <br>
</head> <br>
<body> <br>
<br>
<form name="Form1" <br>
method="POST" <br>
onSubmit="saveScrollCoordinates()" <br>
action="<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>"> <br>
<br>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <br>
<p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <br>
<br>
<hr width="2000"> <br>
<br>
<nobr> <br>
Name: <input type="text" name="name" value="<cfoutput>#FORM.name#</cfoutput>"> <br>
<input type="text" name="scrollx" value="0"> <br>
<input type="text" name="scrolly" value="0"> <br>
<input type="submit" value="Submit"></nobr> <br>
<br>
<hr width="2000"> <br>
<br>
<p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <br>
<p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <br>
<br>
</form> <br>
<br>
</body> <br>
</html>
savescrollcoordinates（）関数は、フォームのonsubmit（）イベントハンドラーによって実行されます。
savescrollcoordinates（）は、適切な値でscrollxとscrollyの非表示入力を更新します。
フォームは同じページに戻ります- coldFusionフォームパラメーターScrollxとScrollyは、Scrolltocoordinates（）関数でスクロール座標を設定します。
- タグのonload（）イベントハンドラーは、scrolltocoordinates（）functionを呼び出します。 ウィンドウのスクロールプロパティは、合格した座標に従って調整されます。
-
フォームをテストすると、どこにスクロールするかに関係なく、ページを送信するときに、垂直と水平の両方で開始した同じ場所に終わることに気付くでしょう。 水平スクロールをより適切にテストするには、ブラウザが非常に狭くなるようにサイズを変更してから、フォームを送信します。 XとYのスクロールは、これを達成するための代替方法が自動的に保存されます。ラッピング
上記の例はどうですか、列でソートできる入力フォームと結果を含む検索ページがありましたか？この例では、ユーザーが列をクリックしてソートすることを選択するたびに、フォームを送信し、わずかに異なる値でSQLを少し実行する可能性があります。新しいソート列とソート方向を使用していくつかの非表示の入力を更新する場合、この機能をページに追加するのは簡単な作業です。フォームに追加の隠し入力を挿入するだけで、ここで提示されたJavaScriptを独自のJavaScriptに組み込む必要があります。ソートリンクは、onclick（）イベントハンドラーを使用して、隠されたスクロール値を更新し、フォームを再送信できます。
私があなたに示したのは、このテクニックの単純な例です。ここのコードは、Windows用のInternet Explorer 6とMozilla Firefox、およびMacのSafariを使用してテストされています。この手法の背後にあるアイデアを出発点として使用してください。独自の創造性とスキルを適用して、アプリケーションで使用するフォームに、より洗練された直感的な感触を追加してください。ページスクロール位置の保存に関するよくある質問
スクロール位置の維持におけるJavaScriptの役割は何ですか？スクロール位置を変数に保存し、後で使用して位置を復元することができます。これは、ページの更新後にスクロール位置を維持したい場合、またはページに戻るときにスクロールバーの位置を維持する場合に特に便利です。cssを使用してスクロールバーの位置を変更するにはどうすればよいですか？このプロパティは、テキストの方向と、巻物を配置する場所を決定します。たとえば、スクロールバーを左側にしたい場合は、「方向：RTL」を使用でき、右側には「方向：LTR」を使用できます。このプロパティは、スクロールスナップアラインメントを制御する場合に特に便利です。
CSSを備えたページのスクロール位置を示すにはどうすればよいですか？
「位置」プロパティを使用して、CSSのページ上のスクロール位置を実現できます。このプロパティを使用すると、ビューポートに関連して要素を配置できます。ビューポートは、スクロール位置を示すために使用できます。たとえば、「位置：スティッキー」を使用して、要素をビューポートに固定し、スクロール位置を示すことができます。これらのプロパティを使用すると、スクロールの位置を制御し、特定のポイントにスナップすることができます。 位置。 「スムーズ」プロパティは、ページのある部分から別の部分から別の部分への移行を行いたい場合に役立ちますが、「自動」プロパティは特定の場所にジャンプしたい場合に役立ちます。次に、「window.scrollto」メソッドを使用して、スクロール位置を復元できます。これは、ページの更新後にスクロール位置を維持する場合、またはページに戻るときにスクロール位置を維持する場合に特に便利です。このプロパティは、スクロールスナップが発生したときに要素がどこに並べられるかを指定します。たとえば、「Scroll-Snap-Align：Start」を使用して、コンテナの開始時に要素を整列させることができます。このプロパティは、ユーザーのスクロール位置に基づいて要素を配置します。たとえば、「Position：Sticky;上：0 'ビューポートの上部に要素を固定する。
以上がより使用可能なフォーム - スクロール位置を制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。