Heim >Web-Frontend >js-Tutorial >Weitere nutzbare Formen - Kontrolle der Scrollposition

Weitere nutzbare Formen - Kontrolle der Scrollposition

Jennifer AnistonOriginal: 2025-03-06 00:32:11342Durchsuche

More Usable Forms - Controlling Scroll Position

Ich suche ständig nach Möglichkeiten, die Benutzerfreundlichkeit meiner Webanwendungen zu verbessern und zu verfeinern. Insbesondere versuche ich immer, Wege zu finden, um meine Formulare besser zu machen, denn seien wir ehrlich: Wenn Sie Webanwendungen erstellen, werden Sie Formulare erstellen. Höchstwahrscheinlich werden Sie viele Formen bauen.

Jeder, der einen durchschnittlichen Benutzer beobachtet hat, der versucht, ein Formular oder eine Reihe von Formen auszufüllen, weiß, dass die Erfahrung oft frustrierend ist. Treffen Sie zusätzliche Maßnahmen, um die Verwendbarkeit Ihrer Formulare zu verbessern- selbst auf geringfügige Weise- und Sie können die Benutzerfreundlichkeit Ihrer Anwendung im Großen und Ganzen wirklich steigern.

Eine Technik, mit der Sie die Benutzerfreundlichkeit Ihrer Form zu verbessern können, besteht darin, die Seitenrolle nach der Rückzahlung zu erhalten. Möglicherweise möchten Sie diese Funktionalität auf einer Suchseite verwenden, beispielsweise auf dem der Benutzer die Ergebnisse nach Spalte sortieren kann. Wenn Sie oben auf der Seite A von der Annahme von Suchparametern und den folgenden Ergebnissen anzeigen, kann es für Benutzer sehr ärgerlich sein, jedes Mal, wenn sie ihre Ergebnisse nach einer bestimmten Spalte sortieren möchten. Zum Glück können wir etwas dagegen tun.

Die Lösung

In diesem Tutorial zeige ich Ihnen, wie einfach die Bildlaufposition einer Seite beibehält, wenn eine Formseite zu sich selbst zurückfasst. Obwohl ich das Beispiel hier in Coldfusion codiert habe, kann die Technik leicht auf andere Sprachen portiert werden.

Es gibt wirklich nur zwei Dinge, die Sie tun müssen, damit diese Technik funktioniert. Sie müssen ein JavaScript schreiben, um die aktuellen X- und Y -Scroll -Koordinaten Ihrer Seite zu erfassen und sie in das Formular zu setzen, damit sie eingereicht werden, wenn Sie wieder auf die aktuelle Seite veröffentlichen. Anschließend müssen Sie diese X- und Y-Scroll-Koordinaten über eine Kombination aus Server- und clientseitiger Skriptabteilung nehmen, die die Scroll-Koordinaten der Seite nach dem Nachladen festlegen. Stück Kuchen!

Der Formularcode

Ich verwende hier ein bloßes Formular, damit Sie sich wirklich klar auf die Mechanik der Funktionsweise des Prozesses konzentrieren können, sondern dass Sie eine kompliziertere Suchseite der oben erwähnten Art erstellen. Sobald Sie wissen, wie Sie Dinge zum Laufen bringen können, können Sie dieses Beispiel problemlos an Ihre eigenen Bedürfnisse anpassen und so klug sein, wie Sie möchten.

<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>

Diese Formseite tut momentan nichts Besonderes. Es gibt einfach an sich selbst zurück und übergibt den Namen Parameter. Ich habe die Absätze und Zahlen so codiert, dass wir auf der Seite scrollierbare Inhalte haben, damit wir einen visuellen Leitfaden haben, um zu beurteilen, wie weit die Seite vertikal gescrollt ist (Beachten Sie, dass dieses Skript sowohl die vertikale als auch die horizontale Schriftrolle beibehält).

. . .

Verfolgung der Bildlauf

Der erste Schritt besteht darin, ein JavaScript hinzuzufügen, um die X- und Y -Scrollwerte zu erhalten und sie in das Formular zu stecken. Dazu müssen wir unser Formular zusammen mit einigen Zeilen von JavaScript zwei versteckte Eingänge hinzufügen, die die aktuellen Scroll -Werte beim Einreichen des Formulars erfassen und an die versteckten Eingänge weitergeben. Die Funktion SavesCrollCoordinaten () untersucht die Browser -Unterstützung für das Dokument.all und verwenden Sie die richtigen Verweise, um die Bildlaufwerte zu greifen und die Formulareingänge entsprechend zu aktualisieren. Wir werden den Event -Handler von Onsubmit () in unserem Formular verwenden, um ihn in diesem Beispiel aufzurufen.

Ich habe die versteckten Felder codiert, die die Bildlaufwerte in diesem Beispiel als Textfelder speichern. Wenn Sie also schnelle Augen haben, können Sie beobachten, wie sich die Werte ändern, bevor das Formular eingereicht wird.

<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>

Der zweite Schritt besteht darin, diese Werte zu nehmen, die mit dem Formular übergeben werden und etwas mit ihnen anfangen. Dafür müssen wir ein paar Zeilen JavaScript mit nur einem Hauch von Coldfusion hinzufügen. Zunächst fügen wir zwei zusätzliche CFPARAM -Tags oben auf der Seite ein, sodass wir auf jeder Seite einige Standard -Scroll -Werte bearbeiten können. Anschließend definieren wir die Funktion "ScrolltoCoordinaten (), um die Seite" Scroll "festzulegen und aufzurufen, wenn die Seite mit dem Ereignishandler von Onload () im

-Tag geladen wird.

<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>

Hier ist die Play-by-Play-Aufschlüsselung, die beschreibt, was passiert, wenn der Benutzer auf die Schaltfläche klickt, um das Formular zu senden:

Die Funktion SavesCrollCoordinaten () wird durch den Ereignishandler des Formulars von OnSubmit () ausgeführt.

savescrollCoordinaten () aktualisiert die Scrollx- und Scrolly -versteckten Eingänge mit den entsprechenden Werten.

Das Formular postet die gleiche Seite zurück.

Die ColdFusion Form -Parameter Scrollx und Scrolly setzen

Testen Sie das Formular und Sie werden feststellen, dass Sie bei der Einreichung der Seite an derselben Stelle, an der Sie vertikal und horizontal gestartet sind, unabhängig davon, wo Sie scrollen. Um die horizontale Schriftrolle besser zu testen, ändern Sie Ihren Browser so, dass er sehr eng ist, und reichen Sie das Formular ein. Ihre X- und Y -Schriftrolle werden automatisch eine alternative Möglichkeit erhalten, dies zu erreichen.

einpacken

Was ist mit dem Beispiel, das ich oben gegeben habe, wo wir eine Suchseite mit einem Eingabebuch und Ergebnissen hatten, die nach der Spalte sortiert werden könnten? In diesem Fall senden Sie wahrscheinlich das Formular ein und führen Sie ein bisschen SQL mit leicht unterschiedlichen Werten aus, wenn der Benutzer sich für eine Spalte zur Sortierung entscheidet. Wenn Sie einige versteckte Eingänge mit der neuen Sortierspalte aktualisieren und die Richtung sortieren, sollte es eine einfache Aufgabe sein, diese Funktion Ihrer Seite hinzuzufügen. Sie müssen nur die zusätzlichen versteckten Eingänge in Ihr Formular einfügen und das hier präsentierte JavaScript in Ihr eigenes JavaScript einbeziehen. Mit Ihren Sortierlinks können Sie den Onclick () -Event -Handler mit den versteckten Scroll -Werten aktualisieren und Ihr Formular erneut einsetzen.

Was ich Ihnen gezeigt habe, ist nur ein einfaches Beispiel für diese Technik. Der Code hier wurde mit Internet Explorer 6 und Mozilla Firefox für Windows und Safari auf einem Mac getestet. Verwenden Sie die Idee hinter dieser Technik als Ausgangspunkt. Wenden Sie Ihre eigene Kreativität und Fähigkeiten an, um den Formularen, die Sie in Ihren Anwendungen verwenden, ein polierteres, intuitiveres Gefühl hinzuzufügen.

häufig gestellte Fragen zur Aufrechterhaltung der Seite Bildlaufposition

Wie kann ich die Bildlaufposition einer Seite mit CSS aufbewahren? Diese Eigenschaft gibt an, ob das Scrollen glatt sein oder springen soll. Um die Bildlaufposition glatt zu machen, können Sie "Scroll-Verhalten: glatt" verwenden. Dies wird den Übergang von einem Teil der Seite zu einem anderen glatter machen und so die Bildlaufposition bewahren. Sie können die Bildlaufposition in einer Variablen speichern und sie später verwenden, um die Position wiederherzustellen. Dies ist besonders nützlich, wenn Sie die Bildlaufposition nach einer Seite aktualisiert oder beim Navigieren zu einer Seite zurückkehren möchten.

Wie kann ich die Position der Scrollbar mit CSS? Diese Eigenschaft bestimmt die Textrichtung und wo die Bildlaufleiste platziert werden soll. Wenn Sie beispielsweise möchten, dass die Scrollbar links ist, können Sie "Richtung: RTL" verwenden, und für die rechte können Sie „Richtung: LTR“ verwenden. Diese Eigenschaft ist besonders nützlich, wenn Sie die Bildlauf -Snap -Ausrichtung steuern möchten.

Wie kann ich die Bildlaufposition auf einer Seite mit CSS angeben? Mit dieser Eigenschaft können Sie ein Element in Bezug auf das Ansichtsfenster positionieren, mit dem Sie die Bildlaufposition angeben können. Zum Beispiel können Sie "Position: Sticky" verwenden, um ein Element-Stick zum Ansichtsfenster zu machen, wodurch die Scroll-Position angezeigt wird. Diese Eigenschaften ermöglichen es Ihnen, die Bildlaufposition zu steuern und bestimmte Punkte zu erreichen. Standort. Die Eigenschaft „Smooth“ ist nützlich, wenn Sie den Übergang von einem Teil der Seite zu einem anderen glatter machen möchten, während die Eigenschaft "Auto" nützlich ist, wenn Sie zu einem bestimmten Ort springen möchten. Anschließend können Sie die Methode "Window.Scrollto" verwenden, um die Bildlaufposition wiederherzustellen. Dies ist besonders nützlich, wenn Sie die Bildlaufposition nach einer Seite aktualisiert oder beim Navigieren zu einer Seite zurückführen möchten. Diese Eigenschaft gibt an, wo ein Element ausgerichtet sein soll, wenn ein Bildlaufschnappauftritt. Zum Beispiel können Sie "Scroll-Snap-Align: Start" verwenden, um das Element am Start des Containers auszurichten. Diese Eigenschaft positioniert ein Element basierend auf der Bildlaufposition des Benutzers. Zum Beispiel können Sie „Position: Sticky; Oben: 0 ’

Das obige ist der detaillierte Inhalt vonWeitere nutzbare Formen - Kontrolle der Scrollposition. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie JQuery, um eine schnelle Paginierung zu erzeugenNächster Artikel：Verwenden Sie JQuery, um eine schnelle Paginierung zu erzeugen

In Verbindung stehende Artikel

Mehr sehen