より使用可能なフォーム - スクロール位置を制御します
私は、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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1672
14
1428
52
1332
25
1276
29
1256
24
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
JavaScriptとWeb：コア機能とユースケース
Apr 18, 2025 am 12:19 AM
Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScript in Action：実際の例とプロジェクト
Apr 19, 2025 am 12:13 AM
現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptエンジンの理解：実装の詳細
Apr 17, 2025 am 12:05 AM
JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：コミュニティ、ライブラリ、リソース
Apr 15, 2025 am 12:16 AM
PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
Python vs. JavaScript：開発環境とツール
Apr 26, 2025 am 12:09 AM
開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
JavaScript通訳者とコンパイラにおけるC/Cの役割
Apr 20, 2025 am 12:01 AM
CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
Webサイトからアプリまで：JavaScriptの多様なアプリケーション
Apr 22, 2025 am 12:02 AM
JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。
