>我不断寻找改善和完善Web应用程序可用性的方法。特别是，我总是尝试找到使自己的表格更好的方法，因为让我们面对现实：如果您要构建Web应用程序，则将构建表格。最有可能的是，您将建立很多形式。
任何观察到普通用户试图完成表格或一系列表格的人都知道体验常常令人沮丧。采取额外的措施来提高您的形式的可用性 - 即使以较小的方式 - - 您可以真正提高应用程序的用户友好性。>
>您可以用来提高表格的可用性的一种技术是保留后背包后的页面滚动。您可能想在搜索页面中使用此功能，例如，用户可以按列对结果进行排序。如果您的页面上的顶部A中可以接受搜索参数，并且显示下面的结果，那么用户必须每次想通过给定列对结果进行分类时，必须将页面向下滚动到结果时，可能会非常烦人。幸运的是，我们可以为此做些事情。>
解决方案>为了使这项技术起作用，实际上您只需要做两件事。 您必须编写一些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>
>这是逐场播放崩溃，描述了用户单击按钮提交表单时发生的情况：
<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隐藏的输入。>我上面给出的示例呢，其中有一个搜索页面，其中包含一个输入表格和可以按列进行排序的结果？在这种情况下，您可能会在用户选择单击列标题进行排序时提交表单并执行一些略有不同值的SQL。如果您要使用新排序列更新一些隐藏的输入，则将此功能添加到页面上应该是一件容易的任务。您只需要将其他隐藏的输入插入您的表单中，并将此处介绍的JavaScript合并到您自己的JavaScript中。您的排序链接可以使用OnClick（）事件处理程序更新隐藏的滚动值并重新提交您的表单。
我向您展示的只是此技术的简单示例。此处的代码已使用Internet Explorer 6和Mozilla Firefox进行测试，以及Mac上的Safari。将此技术背后的想法作为起点。运用您自己的创造力和技能，为您在应用程序中使用的表格添加更加精致，直观的感觉。
>>使用CSS的滚动位置保留页面的滚动位置，可以使用“卷轴行为”属性来实现CSS的滚动位置。此属性指定滚动应平滑还是跳跃。为了使滚动位置平滑，您可以使用“滚动行为：光滑”。这将使从页面的一个部分过渡到另一个更光滑，从而保留了滚动位置。
如何使用CSS？
设置默认的滚动位置？这些属性使您可以控制滚动位置并使其折断到某些点。>
我如何使用JavaScript保存和还原滚动位置？然后，您可以使用“ window.scrollto”方法来恢复滚动位置。当您想在页面刷新后保持滚动位置或返回页面时，这一点特别有用。>
以上是更可用的表格 - 控制滚动位置的详细内容。更多信息请关注PHP中文网其他相关文章！
