更可用的表格 - 控制滚动位置
- Jennifer Aniston原创
- 2025-03-06 00:32:11343浏览
>我不断寻找改善和完善Web应用程序可用性的方法。特别是，我总是尝试找到使自己的表格更好的方法，因为让我们面对现实：如果您要构建Web应用程序，则将构建表格。最有可能的是，您将建立很多形式。
任何观察到普通用户试图完成表格或一系列表格的人都知道体验常常令人沮丧。采取额外的措施来提高您的形式的可用性 - 即使以较小的方式 - - 您可以真正提高应用程序的用户友好性。>
>您可以用来提高表格的可用性的一种技术是保留后背包后的页面滚动。您可能想在搜索页面中使用此功能，例如，用户可以按列对结果进行排序。如果您的页面上的顶部A中可以接受搜索参数，并且显示下面的结果，那么用户必须每次想通过给定列对结果进行分类时，必须将页面向下滚动到结果时，可能会非常烦人。幸运的是，我们可以为此做些事情。>
解决方案>在本教程中，我将向您展示如何在表单页面张贴回到本身时可以轻松保持页面的滚动位置。尽管我在ColdFusion上对此进行了编码，但该技术可以轻松移植到其他语言中。
>为了使这项技术起作用，实际上您只需要做两件事。 您必须编写一些JavaScript，以获取页面的当前X和Y卷轴坐标，并将其放置在表格中，以便将它们发布回当前页面时提交。然后，您必须采用那些X和Y滚动坐标，并结合使用服务器和客户端脚本脚本，将页面的滚动坐标设置为一旦重新加载。一块蛋糕！
表单代码
>我在这里使用了一个裸露的表格，因此您可以真正地专注于该过程的工作原理，而是创建上面提到的更复杂的搜索页面。一旦知道如何使事情正常工作，您就可以轻松地适应自己的需求，并尽可能聪明。
此表单目前没有任何特别的事情。它只需将其张贴回本书，传递名称参数。我已经对段落和数字进行了编码，以便我们在页面上具有可滚动的内容，因此我们有一个视觉指南来帮助判断页面垂直滚动的范围（请注意，该脚本可以保留垂直和水平滚动）。
>跟踪滚动
>第一步是添加一些JavaScript以获取X和Y滚动值并将其放入表单中。为此，我们需要在我们的表单中添加两个隐藏的输入，以及几行JavaScript，当提交表单并将其传递到隐藏的输入时，它们将抓住当前的滚动值。 SavesCrollCoordinates（）函数将查看对文档的浏览器支持。所有内容并使用正确的引用来获取滚动值并相应地更新表单输入。我们将在此示例中使用onsubmit（）event处理程序来称呼它。
>>我已经编码了将滚动值存储为本示例中文本字段的隐藏字段，因此，如果您有快速的眼睛，可以在提交表单之前观看值如何更改。
<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>第二步是采用与表单传递的值并与它们做某事。为此，我们需要添加几行JavaScript，只需稍微coldfusion即可。首先，我们将在页面顶部插入两个额外的CFPARAM标签，因此我们有一些默认的滚动值可以在每个页面加载上使用。然后，我们将定义scrollTocoorDinates（）函数以设置页面滚动，并在使用 tag中的onload（）事件处理程序加载页面时调用它。
>这是逐场播放崩溃，描述了用户单击按钮提交表单时发生的情况：
<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和sclolly隐藏的输入。- 表单帖子回到同一页面。
- >
coldfusion表单参数scrollx和sclolly在scrolltocoordinates（）函数中设置滚动坐标。 标签中的onload（）事件处理程序调用scrolltocoorDinates（）函数。 - 窗口的滚动属性是根据传递的坐标调整的。 >
-
测试表格，您会注意到，无论滚动何处，提交页面时，您最终都位于垂直和水平启动的同一位置。 要更好地测试水平滚动，请调整浏览器大小，以使其非常窄，然后提交表格。您的X和Y卷轴是自动保留使用HREF锚的另一种方法，但是这样做几乎准确或光滑。 - >
总结
>我上面给出的示例呢，其中有一个搜索页面，其中包含一个输入表格和可以按列进行排序的结果？在这种情况下，您可能会在用户选择单击列标题进行排序时提交表单并执行一些略有不同值的SQL。如果您要使用新排序列更新一些隐藏的输入，则将此功能添加到页面上应该是一件容易的任务。您只需要将其他隐藏的输入插入您的表单中，并将此处介绍的JavaScript合并到您自己的JavaScript中。您的排序链接可以使用OnClick（）事件处理程序更新隐藏的滚动值并重新提交您的表单。
我向您展示的只是此技术的简单示例。此处的代码已使用Internet Explorer 6和Mozilla Firefox进行测试，以及Mac上的Safari。将此技术背后的想法作为起点。运用您自己的创造力和技能，为您在应用程序中使用的表格添加更加精致，直观的感觉。
>>保存页面滚动位置的常见问题
>如何使用CSS？
>使用CSS的滚动位置保留页面的滚动位置，可以使用“卷轴行为”属性来实现CSS的滚动位置。此属性指定滚动应平滑还是跳跃。为了使滚动位置平滑，您可以使用“滚动行为：光滑”。这将使从页面的一个部分过渡到另一个更光滑，从而保留了滚动位置。
> javascript在保留滚动位置中的作用是什么？
javascript在保留页面卷轴位置方面起着至关重要的作用。它允许您将滚动位置保存在变量中，然后以后使用它来还原位置。当您想在页面刷新之后保持滚动位置或导航回页面时，这一点特别有用。
如何使用CSS？如何使用css的位置更改滚动条的位置？此属性确定文本方向以及应放置滚动条的位置。例如，如果您希望滚动栏在左侧，则可以使用“方向：rtl”，并且可以使用“方向：ltr”。当您要控制滚动扣对准时，此属性特别有用。
>>如何通过使用“位置”属性来指示使用CSS的页面上的滚动位置？此属性使您可以将元素定位在与视口有关的元素，该元素可用于指示滚动位置。例如，您可以使用“位置：粘性”来使元素坚持到视口上，从而表明滚动位置。
如何使用CSS？
设置默认的滚动位置？这些属性使您可以控制滚动位置并使其折断到某些点。>
>“滚动 - 行为：光滑”和“滚动 - 行为：自动：自动”之间有什么区别？ 地点。当您想将“自动”属性从页面的一个部分转换为另一部分时，“平滑”属性是有用的，而当您想跳到特定位置时，“自动”属性很有用。>
我如何使用JavaScript保存和还原滚动位置？然后，您可以使用“ window.scrollto”方法来恢复滚动位置。当您想在页面刷新后保持滚动位置或返回页面时，这一点特别有用。>
>如何使用CSS？来控制滚动snap对准>使用'scsoll-snap-align属性来控制滚动snap arnap对准。此属性指定滚动快照时应对齐的元素应对齐。例如，您可以使用“ scroll-snap-align：start”在容器开始时对齐元素。 >
>我如何使用CSS？>
使元素坚持使用e元素，可以通过使用“位置：粘性”属性来实现视图。该属性根据用户的滚动位置定位元素。例如，您可以使用'位置：粘性；顶部：0’使元素坚持到视口的顶部。
以上是更可用的表格 - 控制滚动位置的详细内容。更多信息请关注PHP中文网其他相关文章！