CN116541619A - 一种页面滚动展示方法及显示设备 - Google Patents

Abstract

本申请公开了一种页面滚动展示方法及显示设备，在展示包括查询条件区域、查询结果区域、横向滚动条和纵向滚动条的查询页面时，拖拽横向滚动条，将查询条件区域固定展示在查询页面的可视范围内，以及，将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；拖拽纵向滚动条，将查询条件区域和查询结果区域同步按照拖拽操作指示的滚动方向进行纵向滚动展示。可见，该方法及显示设备在进行页面滚动展示方法时，在滚动条左右滚动下动态的给查询条件区域做定位，方便用户查询，纵向滚动控制整个页面滚动，在小屏幕上可以更多的展示查询结果，以在屏幕上展示更多的内容时，兼顾用户新建条件查询，用户体验更好。

Description

一种页面滚动展示方法及显示设备

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面滚动展示方法及显示设备。

背景技术

随着显示设备的快速发展，显示设备的功能将越来越丰富，性能也越来越强大，目前，显示设备包括智能电视、PC、手机，以及其他带有智能显示屏幕的产品等。显示设备中可配置web应用，启动web应用呈现页面，可通过页面基于查询条件查询出对应的结果，并展示在页面中。

由于显示设备的显示屏幕尺寸有限，如果要展示在页面中的内容太多，则无法一屏展示。此时，可通过在页面中展示横向和纵向滚动条，以滚动方式在可视区展示更多的内容。

但是，现有的页面滚动展示方法是基于整个页面进行滚动操作，为展示更多内容，在横向滚动时，查询条件区域会跟随横向滚动，导致查询条件区域消失在可视区域内，不便于用户新建条件进行下一次的查询；而为便于用户新建条件查询，查询条件区域不随着滚动，那么在纵向滚动时，将导致纵向可视区域上无法展示更多内容。可见，现有的方法存在无法在屏幕上展示更多的内容，并兼顾用户新建条件查询的问题。

发明内容

本申请提供了一种页面滚动展示方法及显示设备，以解决现有的方法存在无法在屏幕上展示更多的内容，并兼顾用户新建条件查询的问题。

第一方面，本申请提供了一种显示设备，包括：显示器，被配置为呈现用户界面；与所述显示器连接的控制器，所述控制器被配置为：

接收对web应用的触发操作；

在用户界面中呈现查询页面，所述查询页面中展示有查询条件区域、查询结果区域、横向滚动条和纵向滚动条，所述查询条件区域用于输入查询条件参数，所述查询结果区域用于展示所述查询条件参数对应的查询结果；

接收对所述横向滚动条的拖拽操作，将所述查询条件区域固定展示在所述查询页面的可视范围内，以及，将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；

接收对所述纵向滚动条的拖拽操作，将所述查询条件区域和查询结果区域同步按照拖拽操作指示的滚动方向进行纵向滚动展示。

第二方面，本申请还提供了一种页面滚动展示方法，所述方法包括：

接收对web应用的触发操作；

在用户界面中呈现查询页面，所述查询页面中展示有查询条件区域、查询结果区域、横向滚动条和纵向滚动条，所述查询条件区域用于输入查询条件参数，所述查询结果区域用于展示所述查询条件参数对应的查询结果；

接收对所述横向滚动条的拖拽操作，将所述查询条件区域固定展示在所述查询页面的可视范围内，以及，将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；

接收对所述纵向滚动条的拖拽操作，将所述查询条件区域和查询结果区域同步按照拖拽操作指示的滚动方向进行纵向滚动展示。

第三方面，本申请还提供了一种存储介质，该存储介质可存储有程序，该程序执行时可实现包括本申请提供的页面滚动展示方法各实施例中的部分或全部步骤。

由以上技术方案可知，本发明实施例提供的一种页面滚动展示方法及显示设备，在展示包括查询条件区域、查询结果区域、横向滚动条和纵向滚动条的查询页面时，拖拽横向滚动条，将查询条件区域固定展示在查询页面的可视范围内，以及，将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；拖拽纵向滚动条，将查询条件区域和查询结果区域同步按照拖拽操作指示的滚动方向进行纵向滚动展示。可见，该方法及显示设备在进行页面滚动展示方法时，在滚动条左右滚动下动态的给查询条件区域做定位，方便用户查询，以及，控制查询结果区域滚动展示，以给用户提供更多的内容；纵向滚动控制整个页面滚动，在小屏幕上可以更多的展示查询结果。从视觉效果上，可实现纵向控制整个页面滚动，横向控制部分页面滚动的效果，在屏幕上展示更多的内容时，兼顾用户新建条件查询，用户体验更好。

附图说明

为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1示出了根据一些实施例的页面滚动展示方法的流程图；

图2示出了根据一些实施例的查询页面的示意图；

图3示出了根据一些实施例的带有滚动条的查询页面的示意图；

图4示出了根据一些实施例的展示部分查询结果的查询页面的示意图；

图5示出了根据一些实施例的向右拖拽横向滚动条时的查询页面的示意图；

图6示出了根据一些实施例的向下拖拽纵向滚动条时的查询页面的示意图；

图7示出了根据一些实施例的触发置顶按钮时的查询页面的示意图。

具体实施方式

在一些实施例中，为使显示设备实现搜索功能，可在显示设备中可配置web应用，如浏览器。在启动web应用时，显示设备中呈现页面，用户可通过页面输入查询条件参数查询出对应的结果，并展示在页面中。

由于显示设备的显示屏幕尺寸有限，如果要展示在页面中的内容太多，则无法一屏展示。此时，可通过在页面中展示横向和纵向滚动条，用户拖到横向或纵向滚动条时，以滚动方式在页面可视区展示更多的内容。

现有的页面滚动展示方法是基于整个页面进行滚动操作，为展示更多内容，在横向滚动时，查询条件区域会跟随横向滚动，导致查询条件区域消失在可视区域内，不便于用户新建条件进行下一次的查询；而为便于用户新建条件查询，查询条件区域不随着滚动，那么在纵向滚动时，查询条件区域会占据纵向空间，将导致纵向可视区域上无法展示更多内容。

可见，在具有小屏幕的显示设备中，现有的方法存在无法在屏幕上展示更多的内容，并兼顾用户新建条件查询的问题。

为让屏幕的纵向区域展示更多的查询结果，方便用户滚动操作，且兼顾用户新建查询条件进行下一次的查询，本申请提供一种显示设备，可应用在具有小屏幕且带有查询功能的web应用的显示设备中，如小屏幕笔记本电脑。在进行页面滚动展示方法时，在滚动条左右滚动下动态的给查询条件区域做定位，方便用户查询；把查询条件区域和查询结果区域做在同一个滚动容器下，方便用户滚动查看数据展示，在纵向滚动在小屏幕上可以更多的展示查询结果。从视觉效果上，本申请可实现纵向控制整个页面滚动，横向控制部分页面滚动的效果。

图1示出了根据一些实施例的页面滚动展示方法的流程图。本发明实施例提供的一种显示设备，包括：显示器，被配置为呈现用户界面；与显示器连接的控制器，在执行图1所示的页面滚动展示方法时，控制器被配置为执行下述步骤：

S1、接收对web应用的触发操作。

S2、在用户界面中呈现查询页面，查询页面中展示有查询条件区域、查询结果区域、横向滚动条和纵向滚动条，查询条件区域用于输入查询条件参数，查询结果区域用于展示查询条件参数对应的查询结果。

在用户想要利用显示设备进行信息搜索时，可启动显示设备中配置的web应用，以在显示设备的屏幕中显示查询页面。为便于信息搜索，查询页面中展示查询条件区域和查询结果区域。

图2示出了根据一些实施例的查询页面的示意图。参见图2，查询页面中的查询条件区域用于输入查询条件参数和查询按钮，用户在查询条件区域中的各个条件框中输入参数，再触发查询按钮，即可执行依次查询过程。查询页面中的查询结果区域用于展示查询条件参数对应的查询结果，用户点击查询按钮后，将搜索到的查询结果依次展示在查询结果区域。

在一些实施例中，查询页面中的顶部还可展示有标识栏，标识栏用于展示web应用的logo、用户名、快捷操作键、退出键和中英文切换键等。该标识栏为图2中顶部虚线框所示区域，工具栏由左至右横向位于查询页面中，即标识栏左侧接触查询页面的左侧，标识栏右侧接触查询页面的右侧。

标识栏的左侧下方展示有菜单栏，菜单栏用于提供不同层级的菜单。该菜单栏为图2中左侧虚线框所示区域，该菜单栏的顶部与标识栏的底部接触，菜单栏的左侧接触查询页面的左侧，菜单栏的底部接触查询页面的底部。菜单栏的右侧与标识栏的右下方所围空闲区域即为用于向用户提供输入查询条件参数和查看查询结果的区域，即该空闲区域用于展示查询条件区域、查询结果区域、横向滚动条和纵向滚动条。

该空闲区域为用户可进行操作的区域，在用户查看查询结果时，只有空闲区域响应横向拖拽和纵向拖拽操作，而其他区域的工具栏和选择栏固定不动。

不同层级的菜单，对应不同的页面内容。用户在菜单栏触发查询菜单时，可在空闲区域展示用于实现查询操作的内容，如展示查询条件区域、查询结果区域、横向滚动条和纵向滚动条等。

在一些实施例中，查询页面中可展示标识栏和菜单栏，也不可展示，而仅展示查询条件区域、查询结果区域、横向滚动条和纵向滚动条等。无论是否展示标识栏和菜单栏，本实施例中所述的查询页面的可视范围均指查询条件区域、查询结果区域、横向滚动条和纵向滚动条等可供用户滚动操作的所围区域。

对于不同的查询条件参数，可得到的查询结果的数据量不同。如果数据量小，则所有的查询结果均可同时展示在查询结果区域，即一屏展示；如果数据量大，则所有的查询结果不可同时展示在查询结果区域，即无法一屏展示。

图3示出了根据一些实施例的带有滚动条的查询页面的示意图。参见图3，在无法一屏展示时，所有查询结果所需的展示区域超过查询结果区域。为便于用户通过滚动方式查看还未展示在查询结果区域的查询结果，可为查询页面设置固定宽高并设置溢出滚动，即在查询界面中展示横向滚动条和纵向滚动条，在触发滚动条时，查询页面本身尺寸不变，仅展示内容滚动变化。

横向滚动条以左右方向展示在查询页面的底部，用于横向滚动查询页面；纵向滚动条以上下方向展示在查询页面的一侧，如右侧，用于纵向滚动查询页面。

图4示出了根据一些实施例的展示部分查询结果的查询页面的示意图。参见图4，在基于查询条件区域产生的查询条件参数搜索得到的查询结果的数据量较大时，查询结果区域中仅优先展示前几条的查询结果(查询结果1、查询结果2、查询结果3、查询结果4……)，而其余查询结果则未展示，如图4中的透明区域，透明区域为不可视区域。

以查询页面左上角为原点，将整个查询结果展示在查询结果区域，那么位于查询结果区域内的查询结果为可视区域，而超出查询结果区域展示在透明区域的查询结果为不可视区域。

如图4所示的查询页面状态为执行依次查询操作并展示查询结果的初始状态，此时，查询条件区域位于查询页面的顶部，查询结果区域位于查询条件区域的底部，查询条件区域和查询结果区域构成查询页面的可视范围。

在初始状态下，查询条件区域位于查询页面的可视范围内，查询结果区域中按照由上到下、由左到右的顺序依次展示各个查询结果，可被查看到的查询结果为第一条数据，第二条数据位于第一条数据的下方。横向滚动条位于查询页面的最左侧，纵向滚动条位于查询页面的最顶部，两个滚动条均展示在查询页面的可视范围内。

在一些实施例中，为便于分别控制查询条件区域和查询结果区域的横向滚动，以及同步控制两个区域的纵向滚动，可将查询页面中查询条件区域和查询结果区域进行划分，并为查询条件区域和查询结果区域配置同一个滚动容器。

为此，控制器被进一步配置为：在用户界面中呈现查询页面时，为查询条件区域和查询结果区域配置同一个滚动容器，滚动容器用于在拖拽横向滚动条时，对查询条件区域的左外边距值进行实时赋值；在拖拽纵向滚动条时，不对查询条件区域的左外边距值进行实时赋值。

在一些实施例中，使用同一个滚动容器加载查询条件区域和查询结果区域是在查询页面加载过程中进行的。

为对查询页面中的两个操作区域进行单独控制，可将查询条件区域和查询结果区域置于同一个滚动容器内，并将该两个操作区域划分成两个不同的活动区，以在拖拽横向滚动条时，通过滚动容器对查询条件区域的左外边距值进行实时动态赋值，将查询条件区域动态固定在查询页面的可视范围内；在拖拽纵向滚动条时，滚动容器不再对查询条件区域的左外边距值进行实时动态赋值，而是仅控制查询页面的可视区域沿纵向整体进行滑动。此时，查询条件区域的左侧与查询页面的左侧边界距离为固定值，即查询条件区域可跟随查询结果区域在纵向进行对应的滑动，而查询条件区域的横向位置不变。

S3、接收对横向滚动条的拖拽操作，将查询条件区域固定展示在查询页面的可视范围内，以及，将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示。

在查询页面中展示有横向滚动条和纵向滚动条时，说明需要进行展示的所有查询结果的区域大于查询结果区域，那么查询结果区域即为可被用户查看部分查询结果的可视区域。

在基于图4所示初始状态的查询页面进行滚动操作时，如果在进行横向滚动操作，以查看同一条查询结果的剩余内容时，用户可通过鼠标或触控方式拖拽横向滚动条。

在拖拽横向滚动条时，为避免查询页面执行滚动操作后，查询条件区域消失在可视范围内，本申请可在执行横向滚动时，将查询条件区域固定展示在查询页面的可视范围内，而仅将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示。

为便于查询条件区域在执行横向滚动时始终固定在可视范围内，需为查询条件区域配置固定宽高，使得查询条件区域不随横向滚动的操作变化而动态固定在查询页面的可视范围内。

在一些实施例中，在横向滚动时，控制器在执行接收对横向滚动条的拖拽操作，将查询条件区域固定展示在查询页面的可视范围内，被进一步配置为执行下述步骤：

步骤31、接收对横向滚动条的拖拽操作，获取拖拽操作产生的拖拽距离值和查询条件区域的当前左外边距值，左外边距值是指查询条件区域的左侧与查询结果区域的左侧之间的距离。

步骤32、将拖拽距离值转换成由像素点表征的像素距离值，基于像素距离值和当前左外边距值，计算所述查询条件区域的新左外边距值。

步骤33、基于所述新左外边距值，展示所述查询条件区域，以使执行拖拽操作后的查询条件区域固定展示在查询页面的可视范围内。

为实现查询页面中查询条件区域的固定宽高效果，以使查询条件区域在执行横向滚动时始终固定在查询页面的可视范围内，本申请可实时动态计算横向滚动的尺寸来把查询条件区域动态的固定在可视范围内。

此时，为实现查询条件区域的动态固定，可在用户拖拽横向滚动条时，获取拖拽距离值和查询条件区域的当前左外边距值。拖拽距离值是用户拖拽横向滚动条产生的物理距离，为便于动态控制查询条件区域，可将拖拽距离值转换成由像素点表征的数值，即像素距离值。

左外边距值(marginLeft)是指查询条件区域的左侧与查询结果区域的左侧之间的距离(偏差量)。在初始展示状态下，查询条件区域的左侧与查询结果区域的左侧在一条垂直线上(对齐)，因此，查询条件区域的左侧与查询结果区域的左侧之间的距离为0，则查询条件区域的左外边距值为0。初始展示状态是指查询结果区域的顶部边界与查询条件区域的底部边界接触，查询结果区域的左侧边界与查询页面(或菜单栏)的左侧边界接触的状态，即查询结果区域从头展示查询结果的状态。

如果产生横向拖拽，那么查询条件区域的左侧与查询结果区域的左侧之间存在一定距离，而该距离即为偏差量，由拖拽距离值产生。因此，为弥补横向拖拽后查询条件区域的左侧与查询结果区域的左侧产生的偏差量，需重新确定查询条件区域的新左外边距值。此时，计算像素距离值和当前左外边距值的总和，作为查询条件区域的新左外边距值。基于被赋予的新左外边距值展示查询条件区域，可以保证查询条件区域始终处于原位置，以动态固定在查询页面的可视范围内。

图5示出了根据一些实施例的向右拖拽横向滚动条时的查询页面的示意图。参见图5，在用户向右拖拽横向滚动条，且拖拽距离值为50px时，50px是指基于拖拽距离值转换后的像素点个数(像素距离值)，查询页面的可视范围本应整体向左移动50px。但是，为保证查询条件区域保持不动的效果，此时，仅有查询结果区域向左移动50px，那么查询条件区域的左侧与查询结果区域的左侧产生50px的偏差量。

而查询条件区域的左侧与查询结果区域的左侧的原偏差量为0(在横向拖拽前)，因此，为弥补50px的偏差，使得查询条件区域能够位于原位置，那么需计算查询条件区域的新左外边距值L1＝L0+a，L0为查询条件区域的当前左外边距值，在初始状态下，L0＝0；a为拖拽产生的像素距离值。此时，L1＝0+50＝50px。

此时，基于新左外边距值抵消查询条件区域的左侧与查询结果区域的左侧产生50px的偏差量，使得查询条件区域的左侧与查询结果区域的左侧的偏差量仍为0，即查询条件区域的左侧与查询结果区域的左侧仍在一条垂直线上，以使展示的查询条件区域位于原位置，实现始终动态固定在查询页面的可视范围内。

在一些实施例中，在向右拖拽横向滚动条时，为便于用户能够查看查询结果区域中所展示的各个查询结果的剩余内容，并兼顾用户新建查询条件以进行新查询操作时，本申请可仅控制查询结果区域执行对应的滚动操作，而将查询条件区域固定展示在查询页面的可视范围内。

此时，控制器被进一步配置为：接收对横向滚动条的向右拖拽操作，确定滚动方向为向左滚动，将查询结果区域中的查询结果按照拖拽距离值向左进行横向滚动展示，以及，将查询条件区域固定展示在查询页面的可视范围内，拖拽距离值用于表征查询结果的滚动程度。

在向右拖拽横向滚动条时，为便于滚动查看查询结果区域中同一查询结果的剩余内容，查询结果区域中的查询结果可按照拖拽操作进行滚动。此时，基于向右拖拽操作确定查询结果区域中各个查询结果的横向滚动方向为向左滚动，各个查询结果的滚动程度由横向滚动条的拖拽距离值来限定。

因此，在向右拖拽横向滚动条时，将查询结果区域中的查询结果按照拖拽距离值向左进行横向滚动展示。例如，向右产生的像素拖拽距离值为50px，则查询结果区域中的各个查询结果均向左横向滚动50px，基于出现在可视范围内的各个查询结果的内容重新渲染页面，以展示新的查询结果区域。

在向右拖拽横向滚动条时，查询页面的内容本应整体向左滚动，但由于为便于用户能够实时创建新查询条件进行下一次的查询过程，本申请将查询条件区域动态固定展示在查询页面的可视范围内。此时，在向右拖拽距离值为50px时，则查询条件区域和查询结果区域均本应向左横向滚动50px，而实际上仅有查询结果区域执行向左横向滚动50px，以便用户能够查看到同一条查询结果的后续内容，查询条件区域并未改变位置，这将导致查询条件区域的左侧与查询结果区域的左侧产生50px的偏差。因此，为从视觉上达到查询条件区域动态固定展示在查询页面的可视范围内的效果，基于拖拽产生的像素距离值和当前左外边距值重新确定查询条件区域的新左外边距值。即将计算的距离值和50px赋值给查询条件区域的左外边距值，以抵消滚动后两个区域之间产生的50px的偏差，使得查询条件区域仍处于查询页面的原位置。

在一些实施例中，如果基于图5所示状态，用户再次向右拖拽横向滚动条，此次产生的拖拽距离值对应的像素距离值为10px，那么二次拖拽后查询条件区域的左侧与查询结果区域的左侧之间产生的总偏差量为60px。因此，再次为查询条件区域的左外边距值重新赋值为L2＝L1+b＝50+10＝60px，以抵消本次拖拽后产生的总偏差量60px，使得查询条件区域的左侧与查询结果区域的左侧仍在一条垂直线上，以使展示的查询条件区域位于原位置，实现始终动态固定在查询页面的可视范围内。

在基于图5所示的状态向左拖拽横向滚动条时，查询结果区域应整体向右滚动展示。如果拖拽距离值对应的像素距离值c为20px时，则查询条件区域的左侧与查询结果区域的左侧的偏差量减少20px，即实际偏差量为30px。那么再次为查询条件区域的左外边距值重新赋值为L3＝L1-c＝50-20＝30px，以抵消本次拖拽后产生的实际偏差量30px，使得查询条件区域的左侧与查询结果区域的左侧仍在一条垂直线上，以使展示的查询条件区域位于原位置，实现始终动态固定在查询页面的可视范围内。

在一些实施例中，在向右拖拽横向滚动条时，查询条件区域的左侧与查询结果区域的左侧之间的距离逐渐增大，因此，在计算查询条件区域的新左外边距值时执行加法运算。在向左拖拽横向滚动条时，查询条件区域的左侧与查询结果区域的左侧之间的距离逐渐减大，因此，在计算查询条件区域的新左外边距值时执行减法运算。

在一些实施例中，在向左拖拽横向滚动条时，为便于用户能够查看查询结果区域中所展示的各个查询结果的前述内容，并兼顾用户新建查询条件以进行新查询操作时，本申请可仅控制查询结果区域执行对应的滚动操作，而将查询条件区域固定展示在查询页面的可视范围内。

此时，控制器被进一步配置为：接收对横向滚动条的向左拖拽操作，确定滚动方向为向右滚动，将查询结果区域中的查询结果按照拖拽距离值向右进行横向滚动展示，以及，将查询条件区域固定展示在查询页面的可视范围内，拖拽距离值用于表征查询结果的滚动程度。

在向左拖拽横向滚动条时，为便于滚动查看查询结果区域中同一查询结果的前述内容，查询结果区域中的查询结果可按照拖拽操作进行滚动。此时，基于向左拖拽操作确定查询结果区域中各个查询结果的横向滚动方法为向右滚动，各个查询结果的滚动程度由横向滚动条的拖拽距离值来限定。

因此，在向左拖拽横向滚动条时，将查询结果区域中的查询结果按照拖拽距离值向右进行横向滚动展示。例如，向左拖拽产生的像素距离值为20px，则查询结果区域中的各个查询结果均向右横向滚动20px，基于出现在可视范围内的各个查询结果的内容重新渲染页面，以展示新的查询结果区域。

在向左拖拽横向滚动条时，查询页面的内容本应整体向右滚动，但由于为便于用户能够实时创建新查询条件进行下一次的查询过程，本申请将查询条件区域动态固定展示在查询页面的可视范围内。此时，在向左拖拽产生的像素距离值d为20px时，则查询条件区域和查询结果区域均本应向右横向滚动20px，而实际上仅有查询结果区域执行向右横向滚动20px，而查询条件区域并未改变位置，此时，查询条件区域的左侧与查询结果区域的左侧的偏差量减少20px，以便用户能够查看到同一条查询结果的后续内容。因此，为从视觉上达到查询条件区域动态固定展示在查询页面的可视范围内的效果，基于拖拽产生的像素距离值和当前左外边距值重新确定查询条件区域的新左外边距值。如果在向左拖拽前，查询条件区域的当前左外边距值L’为60px，那么新左外边距值L4＝L’-d＝60-20＝40px，即实际偏差量为40px。基于计算得到的40px对查询条件区域的左外边距值进行重新赋值，以抵消滚动后两个区域之间产生的40px的偏差，使得查询条件区域仍处于查询页面的原位置。

可见，在对查询页面进行滚动查看不可视区域的内容时，将查询页面中的查询结果区域和查询条件区域执行不同的滚动策略，即在拖拽横向滚动条时，查询条件区域仍处于查询页面的原位置，实现始终动态固定在查询页面的可视范围内，便于用户能够实时基于查询条件区域创建新查询条件进行下一次的查询过程。查询结果区域跟随横向滚动条的拖拽而滚动展示以展示在查询页面的可视范围内，以向用户展示更多的信息，便于用户能够查看同一查询结果的前述或剩余内容，以完整查看同一查询结果的全部内容。

S4、接收对纵向滚动条的拖拽操作，将查询条件区域和查询结果区域同步按照拖拽操作指示的滚动方向进行纵向滚动展示。

在用户需要查看更多条的查询结果时，用户可拖拽纵向滚动条，实现纵向屏幕展示更多的内容。在查询页面纵向滚动展示时，本申请为查询条件区域和查询结果区域配置同一个滚动容器，该滚动容器可控制查询条件区域和查询结果区域同步进行滚动，且不再对查询条件区域的左外边距值进行重新赋值，即查询条件区域的左侧与查询结果区域的左侧之间的距离为固定值(为前一次拖拽产生的距离值)。查询条件区域可跟随查询结果区域在纵向进行对应的滑动，而查询条件区域的横向位置不变。

在拖拽纵向滚动条时，为了让显示设备屏幕能够展示更多的内容，查询条件区域不再动态固定在查询页面的可视范围内，而是跟随拖拽操作进行纵向滚动，以避免查询条件区域占用屏幕的纵向空间，展示更多数量的查询结果。

为便于纵向滚动时查询条件区域能够跟随查询结果区域同步滚动，在此场景下，不再为查询条件区域的左外边距值实时赋值，此时，以浏览器默认的纵向滚动策略实现查询页面的纵向滚动展示。

再次参见图4所示状态，在拖拽纵向滚动条之前，纵向滚动条位于查询页面的顶部，此时，查询条件区域位于查询页面的顶部，查询结果区域位于查询条件区域的底部。

图6示出了根据一些实施例的向下拖拽纵向滚动条时的查询页面的示意图。参见图6，如果用户想要查看更多数量的查询结果，则向下拖拽纵向滚动条，查询结果区域中的查询结果可按照拖拽操作进行滚动。此时，基于向下拖拽操作确定查询条件区域和查询结果区域中各个查询结果的纵向滚动方向为向上滚动，各个查询结果的滚动程度由纵向滚动条的拖拽距离值来限定。

因此，在向下拖拽纵向滚动条时，将查询条件区域和查询结果区域中的查询结果按照拖拽距离值向上进行纵向滚动展示。在向上拖拽纵向滚动条时，将查询条件区域和查询结果区域中的查询结果按照拖拽距离值向下进行纵向滚动展示。例如，向下拖拽距离值为50px，则查询条件区域和查询结果区域中的各个查询结果均向上纵向滚动50px，基于出现在可视范围内的各个查询结果的内容重新渲染页面，以展示新的查询结果区域(查询结果11、查询结果12、查询结果13、查询结果14……)。

在一些实施例中，如果用户通过向下拖拽纵向滚动条以查看到更多数量的查询结果后，那么极易出现查询条件区域从查询页面的可视范围内消失的情况，那么，在此场景下，若再次拖拽横向滚动条，则不再展示查询条件区域，且查询结果区域中的查询结果实时渲染更新展示。

为此，控制器被进一步配置为执行下述步骤：

步骤51、接收对纵向滚动条的拖拽操作，如果拖拽距离值超过查询条件区域的高度值，则纵向滚动展示后查询条件区域在查询页面的可视范围的顶部消失；

步骤52、在查询条件区域消失在查询页面的可视范围内时，接收对横向滚动条的拖拽操作，则将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示，以及，不对所述查询条件区域的左外边距值进行实时动态赋值，以使查询条件区域不展示在查询页面的可视范围内。

在用户拖拽纵向滚动条以在纵向屏幕上展示更多数量的查询结果时，查询条件区域和查询结果区域中的查询结果的滚动展示方式均是根据拖拽距离值来限定，即每产生一次拖拽距离值，则查询条件区域和查询结果区域中的查询结果同步滚动拖拽距离值对应的像素点数值。

如果查询页面整体纵向滚动的距离超过查询条件区域的高度，那么查询条件区域向上滚动后将在查询页面的可视范围的顶部消失，即在向上拖拽纵向滚动条产生的总拖拽距离超过查询条件区域的高度值，则查询条件区域从查询页面的可视范围内消失，此时，查询页面的可视范围内所能被看到的内容均为查询结果区域。

再次参见图6，如果在图6所示的查询条件区域从查询页面的可视范围内消失的状态下，用户再次拖拽横向滚动条，此时，为便于用户查看新展示在查询结果区域中的各个新查询结果的前述或剩余内容，在向左或向右拖拽横向滚动条时，查询条件区域不再出现并展示在查询页面的可视范围内，以及，查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示，以便用户查看同一新查询结果的前述或剩余内容。

在一些实施例中，在查询条件区域是否展示在查询页面的可视范围内时，如果产生拖拽横向滚动条的操作，那么会存在至少两种执行场景，即查询条件区域是动态固定在查询页面的可视范围内，还是不再在查询页面的可视范围内展示出来。因此，为实现页面滚动展示，控制器被进一步配置为执行下述步骤：

步骤61、在接收到对横向滚动条的拖拽操作时，判断查询条件区域是否展示在查询页面的可视范围内。

步骤62、如果查询条件区域展示在查询页面的可视范围内，则响应横向滚动条的拖拽操作将查询条件区域固定展示在查询页面的可视范围内，以及，将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示。

步骤63、如果查询条件区域未展示在查询页面的可视范围内，则响应横向滚动条的拖拽操作将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示，以及，查询条件区域不展示在查询页面的可视范围内。

在用户基于查询页面进行拖拽横向滚动条时，先判断查询条件区域是否展示在查询页面的可视范围内。此时，可通过获取查询条件区域的展示参数进行判断，展示参数可由坐标来表示，如果展示参数存在负值的坐标值，则说明查询条件区域未展示在查询页面的可视范围内。如果展示参数均为正值的坐标值，则说明查询条件区域展示在查询页面的可视范围内。

在基于展示参数判断出查询条件区域展示在查询页面的可视范围内时，需保证在拖拽横向滚动条时，查询条件区域能够始终动态固定在查询页面的可视范围内。因此，需要对查询条件区域的左外边距值进行实时动态赋值，此时，响应横向滚动条的拖拽操作，将查询条件区域固定展示在查询页面的可视范围内，以及，将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示。此实现过程可参照前述实施例提供的步骤S3的内容，此处不再赘述。

在基于展示参数判断出查询条件区域未展示在查询页面的可视范围内时，说明之前通过纵向滚动已将查询条件区域从可视范围内滚出，则为保证纵向展示空间，不再需要查询条件区域展示在查询页面的可视范围内。因此，无需对查询条件区域的左外边距值进行实时动态赋值，此时，响应横向滚动条的拖拽操作将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示，以及，查询条件区域不展示在查询页面的可视范围内。此实现过程可参照前述实施例提供的步骤51-52的内容，此处不再赘述。

在一些实施例中，在通过拖拽纵向滚动条将查询条件区域从查询页面的可视范围的顶部消失展示时，如果再触发拖拽横向滚动条的操作，则还可以对查询条件区域的左外边距值进行实时动态赋值。此时，查询条件区域以浮窗的形式展示在查询页面的顶部。而查询页面的顶部为查询结果区域的顶部位置，因此，浮窗形式展示的查询条件区域会对查询结果区域的顶部内容进行遮挡。

在一些实施例中，在上述场景下，在拖拽横向滚动条时，本来消失的查询条件区域是否再次展示在可视范围内，可根据用户实际需求进行配置。例如，如果为了在纵向方向上展示更多的查询结果以及节约性能，则可配置查询条件区域不再展示出来，即不对查询条件区域的左外边距值进行实时动态赋值；如果为了便于用户再次重置查询条件参数，则可配置查询条件区域再次展示出来，即需对查询条件区域的左外边距值进行实时动态赋值。

在一些实施例中，为保证查询条件区域能够动态固定在查询页面的可视范围内，还可使查询条件区域的左右位置与显示窗口的位置保持稳定的距离值，通过检测在显示器上显示的查询页面的横坐标重新设置查询条件区域的顶点坐标的横坐标，以使得查询条件区域始终在显示窗口显示。查询条件区域的纵坐标维持恒定。其中，显示窗口的位置可为查询页面所展示的位置，包括全屏展示或半屏展示；查询条件区域的顶点坐标可为该查询条件区域所处框的左上角坐标。

在一些实施例中，本申请任一实施例所述的坐标值均以二维坐标系来确定，二维坐标系的原点位于显示器所显示页面的左上角，由左到右为X轴正向，由上到下为Y轴正向。

在一些实施例中，查询条件区域横坐标的刷新频率大于显示器的刷新频率，以减轻横向位置调整过程中产生的抖动。刷新查询条件区域横坐标的方式可以参照上述实施例。

在一些实施例中，以预定的频率刷新查询条件区域的刷新查询条件区域横坐标，例如200HZ，或240HZ。在一些实施例中根据显示器的刷新频率设置刷新查询条件区域的频率以使其大于显示器的刷新频率，例如在显示器是60HZ刷新的时候，设置刷新查询条件区域的频率为100HZ，在显示器是120HZ刷新的时候，设置刷新查询条件区域的频率为240HZ。

在一些实施例中，用户通过向下拖拽纵向滚动条以查看到更多数量的查询结果后，如果用户想要查看首位查询结果，或者想要重新基于查询条件区域产生新的查询条件以进行新一轮的查询过程，本申请可通过置顶按钮快速控制查询页面整体快速向下滚动内容，使得查询条件区域和查询结果区域快速向下滚动以回到纵向上的初始位置，以及，纵向滚动条快速回到顶部位置。

具体地，在快速回到顶部位置时，控制器被进一步配置为执行下述步骤：

步骤71、接收对纵向滚动条的拖拽操作，如果查询条件区域在查询页面的可视范围的顶部消失，则在查询页面中展示置顶按钮。

步骤72、接收对置顶按钮的触发操作，将查询条件区域和查询结果区域同步向下滚动展示，向下滚动后，纵向滚动条回到查询页面的顶部，查询条件区域展示在查询页面的可视范围的顶部，以及，查询结果区域从首位依次展示各个查询结果。

为便于执行快速回落操作，以及，避免置顶按钮长时间显示造成对查询页面可视内容的遮挡，本申请可在用户向下拖拽纵向滚动条，查询条件区域和查询结果区域同步向上滚动展示，并使得查询条件区域在查询页面的可视范围的顶部消失后，才再查询页面中展示置顶按钮，再次参见图6。

在用户需要进行查询页面的快速回落时，用户可触发置顶按钮，此时，纵向滚动条迅速从查询页面的底部回到顶部位置，同时，查询页面的内容整体快速向下滚动，回到纵向方向上的初始状态。而触发置顶按钮，并不会影响横向滚动条的状态，即横向滚动条在原位置，查询结果区域不进行横向滚动展示。

图7示出了根据一些实施例的触发置顶按钮时的查询页面的示意图。参见图7，在触发置顶按钮后，查询页面的内容沿纵向方向上回到初始状态，此状态下，查询条件区域和查询结果区域同步向下滚动展示，纵向滚动条回到查询页面的顶部，查询条件区域展示在查询页面的可视范围的顶部，以及，查询结果区域从首位依次展示各个查询结果，置顶按钮取消显示。

可见，本申请提供的显示设备，在展示包括查询条件区域、查询结果区域、横向滚动条和纵向滚动条的查询页面时，拖拽横向滚动条，将查询条件区域固定展示在查询页面的可视范围内，以及，将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；拖拽纵向滚动条，将查询条件区域和查询结果区域同步按照拖拽操作指示的滚动方向进行纵向滚动展示。可见，该显示设备在进行页面滚动展示方法时，在滚动条左右滚动下动态的给查询条件区域做定位，方便用户查询，以及，控制查询结果区域滚动展示，以给用户提供更多的内容；纵向滚动控制整个页面滚动，在小屏幕上可以更多的展示查询结果。从视觉效果上，可实现纵向控制整个页面滚动，横向控制部分页面滚动的效果，在屏幕上展示更多的内容时，兼顾用户新建条件查询，用户体验更好。

图1示出了根据一些实施例的页面滚动展示方法的流程图。参见图1，本发明实施例提供一种页面滚动展示方法，由前述实施例提供的显示设备中的控制器执行，所述方法包括：

S1、接收对web应用的触发操作；

S2、在用户界面中呈现查询页面，所述查询页面中展示有查询条件区域、查询结果区域、横向滚动条和纵向滚动条，所述查询条件区域用于输入查询条件参数，所述查询结果区域用于展示所述查询条件参数对应的查询结果；

S3、接收对所述横向滚动条的拖拽操作，将所述查询条件区域固定展示在所述查询页面的可视范围内，以及，将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；

S4、接收对所述纵向滚动条的拖拽操作，将所述查询条件区域和查询结果区域同步按照拖拽操作指示的滚动方向进行纵向滚动展示。

本申请一些实施例中，所述接收对所述横向滚动条的拖拽操作，将所述查询条件区域固定展示在所述查询页面的可视范围内，包括：

接收对所述横向滚动条的拖拽操作，获取所述拖拽操作产生的拖拽距离值；

将所述拖拽距离值转换成由像素点表征的数值，并赋值给所述查询条件区域的左外边距值，以使执行拖拽操作后的所述查询条件区域固定展示在所述查询页面的可视范围内，所述左外边距值是指所述查询条件区域的左侧与所述查询结果区域的左侧之间的距离。

本申请一些实施例中，所述方法还包括：

接收对所述横向滚动条的向右拖拽操作，确定所述滚动方向为向左滚动，将所述查询结果区域中的查询结果按照所述拖拽距离值向左进行横向滚动展示，以及，将所述查询条件区域固定展示在所述查询页面的可视范围内，所述拖拽距离值用于表征查询结果的滚动程度；

接收对所述横向滚动条的向左拖拽操作，确定所述滚动方向为向右滚动，将所述查询结果区域中的查询结果按照所述拖拽距离值向右进行横向滚动展示，以及，将所述查询条件区域固定展示在所述查询页面的可视范围内，所述拖拽距离值用于表征查询结果的滚动程度。

本申请一些实施例中，所述方法还包括：

接收对所述纵向滚动条的拖拽操作，如果所述查询条件区域在所述查询页面的可视范围的顶部消失，则在所述查询页面中展示置顶按钮；

接收对所述置顶按钮的触发操作，将所述查询条件区域和查询结果区域同步向下滚动展示，向下滚动后，所述纵向滚动条回到所述查询页面的顶部，所述查询条件区域展示在所述查询页面的可视范围的顶部，以及，所述查询结果区域从首位依次展示各个查询结果。

本申请一些实施例中，所述方法还包括：

接收对所述纵向滚动条的拖拽操作，如果拖拽距离值超过所述查询条件区域的高度值，则纵向滚动展示后所述查询条件区域在所述查询页面的可视范围的顶部消失；

在所述查询条件区域消失在所述查询页面的可视范围内时，接收对所述横向滚动条的拖拽操作，则将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示，以及，不对所述查询条件区域的左外边距值进行实时动态赋值，以使所述查询条件区域不展示在所述查询页面的可视范围内。

本申请一些实施例中，所述控制器被进一步配置为：

在接收到对所述横向滚动条的拖拽操作时，判断所述查询条件区域是否展示在所述查询页面的可视范围内；

如果所述查询条件区域展示在所述查询页面的可视范围内，则响应横向滚动条的拖拽操作将所述查询条件区域固定展示在所述查询页面的可视范围内，以及，将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；

如果所述查询条件区域未展示在所述查询页面的可视范围内，则响应横向滚动条的拖拽操作将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示，以及，所述查询条件区域不展示在所述查询页面的可视范围内。

本申请一些实施例中，所述控制器被进一步配置为：

在用户界面中呈现查询页面时，为所述查询条件区域和查询结果区域配置同一个滚动容器，所述滚动容器用于在拖拽横向滚动条时，对所述查询条件区域的左外边距值进行实时赋值；在拖拽纵向滚动条时，不对所述查询条件区域的左外边距值进行实时赋值。

由以上技术方案可知，本申请提供的一种页面滚动展示方法及显示设备，在展示包括查询条件区域、查询结果区域、横向滚动条和纵向滚动条的查询页面时，拖拽横向滚动条，将查询条件区域固定展示在查询页面的可视范围内，以及，将查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；拖拽纵向滚动条，将查询条件区域和查询结果区域同步按照拖拽操作指示的滚动方向进行纵向滚动展示。可见，该方法及显示设备在进行页面滚动展示方法时，在滚动条左右滚动下动态的给查询条件区域做定位，方便用户查询，以及，控制查询结果区域滚动展示，以给用户提供更多的内容；纵向滚动控制整个页面滚动，在小屏幕上可以更多的展示查询结果。从视觉效果上，可实现纵向控制整个页面滚动，横向控制部分页面滚动的效果，在屏幕上展示更多的内容时，兼顾用户新建条件查询，用户体验更好。

具体实现中，本发明还提供一种存储介质，其中，该存储介质可存储有程序，该程序执行时可包括本发明提供的页面滚动展示方法的各实施例中的部分或全部步骤。所述的存储介质可为磁碟、光盘、只读存储记忆体(英文：read-only memory，简称：ROM)或随机存储记忆体(英文：random access memory，简称：RAM)等。

本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等。

本说明书中各个实施例之间相同相似的部分互相参见即可。尤其，对于页面滚动展示方法实施例而言，由于其基本相似于显示设备实施例，所以描述的比较简单，相关之处参见显示设备实施例中的说明即可。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

为了方便解释，已经结合具体的实施方式进行了上述说明。但是，上述示例性的讨论不是意图穷尽或者将实施方式限定到上述公开的具体形式。根据上述的教导，可以得到多种修改和变形。上述实施方式的选择和描述是为了更好的解释原理以及实际的应用，从而使得本领域技术人员更好的使用所述实施方式以及适于具体使用考虑的各种不同的变形的实施方式。

Claims (10)

1.一种显示设备，其特征在于，包括：

显示器，被配置为呈现用户界面；

与所述显示器连接的控制器，所述控制器被配置为：

接收对web应用的触发操作；

在用户界面中呈现查询页面，所述查询页面中展示有查询条件区域、查询结果区域、横向滚动条和纵向滚动条，所述查询条件区域用于输入查询条件参数，所述查询结果区域用于展示所述查询条件参数对应的查询结果；

接收对所述横向滚动条的拖拽操作，将所述查询条件区域固定展示在所述查询页面的可视范围内，以及，将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；

接收对所述纵向滚动条的拖拽操作，将所述查询条件区域和查询结果区域同步按照拖拽操作指示的滚动方向进行纵向滚动展示。

2.根据权利要求1所述的显示设备，其特征在于，所述控制器在执行所述接收对所述横向滚动条的拖拽操作，将所述查询条件区域固定展示在所述查询页面的可视范围内，被进一步配置为：

接收对所述横向滚动条的拖拽操作，获取所述拖拽操作产生的拖拽距离值；

将所述拖拽距离值转换成由像素点表征的数值，并赋值给所述查询条件区域的左外边距值，以使执行拖拽操作后的所述查询条件区域固定展示在所述查询页面的可视范围内，所述左外边距值是指所述查询条件区域的左侧与所述查询结果区域的左侧之间的距离。

3.根据权利要求2所述的显示设备，其特征在于，所述控制器被进一步配置为：

接收对所述横向滚动条的向右拖拽操作，确定所述滚动方向为向左滚动，将所述查询结果区域中的查询结果按照所述拖拽距离值向左进行横向滚动展示，以及，将所述查询条件区域固定展示在所述查询页面的可视范围内，所述拖拽距离值用于表征查询结果的滚动程度；

接收对所述横向滚动条的向左拖拽操作，确定所述滚动方向为向右滚动，将所述查询结果区域中的查询结果按照所述拖拽距离值向右进行横向滚动展示，以及，将所述查询条件区域固定展示在所述查询页面的可视范围内，所述拖拽距离值用于表征查询结果的滚动程度。

4.根据权利要求1所述的显示设备，其特征在于，所述控制器被进一步配置为：

接收对所述纵向滚动条的拖拽操作，如果所述查询条件区域在所述查询页面的可视范围的顶部消失，则在所述查询页面中展示置顶按钮；

接收对所述置顶按钮的触发操作，将所述查询条件区域和查询结果区域同步向下滚动展示，向下滚动后，所述纵向滚动条回到所述查询页面的顶部，所述查询条件区域展示在所述查询页面的可视范围的顶部，以及，所述查询结果区域从首位依次展示各个查询结果。

5.根据权利要求1所述的显示设备，其特征在于，所述控制器被进一步配置为：

接收对所述纵向滚动条的拖拽操作，如果拖拽距离值超过所述查询条件区域的高度值，则纵向滚动展示后所述查询条件区域在所述查询页面的可视范围的顶部消失；

在所述查询条件区域消失在所述查询页面的可视范围内时，接收对所述横向滚动条的拖拽操作，则将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示，以及，不对所述查询条件区域的左外边距值进行实时动态赋值，以使所述查询条件区域不展示在所述查询页面的可视范围内。

6.根据权利要求5所述的显示设备，其特征在于，所述控制器被进一步配置为：

在接收到对所述横向滚动条的拖拽操作时，判断所述查询条件区域是否展示在所述查询页面的可视范围内；

如果所述查询条件区域展示在所述查询页面的可视范围内，则响应横向滚动条的拖拽操作将所述查询条件区域固定展示在所述查询页面的可视范围内，以及，将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；

如果所述查询条件区域未展示在所述查询页面的可视范围内，则响应横向滚动条的拖拽操作将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示，以及，所述查询条件区域不展示在所述查询页面的可视范围内。

7.根据权利要求1所述的显示设备，其特征在于，所述控制器被进一步配置为：

在用户界面中呈现查询页面时，为所述查询条件区域和查询结果区域配置同一个滚动容器，所述滚动容器用于在拖拽横向滚动条时，对所述查询条件区域的左外边距值进行实时赋值；在拖拽纵向滚动条时，不对所述查询条件区域的左外边距值进行实时赋值。

8.一种页面滚动展示方法，其特征在于，所述方法包括：

接收对web应用的触发操作；

在用户界面中呈现查询页面，所述查询页面中展示有查询条件区域、查询结果区域、横向滚动条和纵向滚动条，所述查询条件区域用于输入查询条件参数，所述查询结果区域用于展示所述查询条件参数对应的查询结果；

接收对所述横向滚动条的拖拽操作，将所述查询条件区域固定展示在所述查询页面的可视范围内，以及，将所述查询结果区域中的查询结果按照拖拽操作指示的滚动方向进行横向滚动展示；

接收对所述纵向滚动条的拖拽操作，将所述查询条件区域和查询结果区域同步按照拖拽操作指示的滚动方向进行纵向滚动展示。

9.根据权利要求8所述的方法，其特征在于，所述接收对所述横向滚动条的拖拽操作，将所述查询条件区域固定展示在所述查询页面的可视范围内，包括：

接收对所述横向滚动条的拖拽操作，获取所述拖拽操作产生的拖拽距离值；

将所述拖拽距离值转换成由像素点表征的数值，并赋值给所述查询条件区域的左外边距值，以使执行拖拽操作后的所述查询条件区域固定展示在所述查询页面的可视范围内，所述左外边距值是指所述查询条件区域的左侧与所述查询结果区域的左侧之间的距离。

10.根据权利要求8所述的方法，其特征在于，所述方法还包括：

在用户界面中呈现查询页面时，为所述查询条件区域和查询结果区域配置同一个滚动容器，所述滚动容器用于在拖拽横向滚动条时，对所述查询条件区域的左外边距值进行实时赋值；在拖拽纵向滚动条时，不对所述查询条件区域的左外边距值进行实时赋值。