一种网页显示方法和装置与流程

本申请涉及网页技术领域，特别是涉及一种网页显示方法和一种网页显示装置。

背景技术：

随着网络的发展，越来越多的用户通过浏览器浏览网页来获取所需的信息。例如浏览购物网站的网页进行购物，浏览新闻网站的网页获知时事，浏览游戏网站的网页玩网页游戏等。

网页通常是通过浏览器承载进行展示的，将浏览器中展示网页的区域称为可视区，可视区所能展示的网页内容是有限的，当一个网页的内容过长超出可视区时，通常会在浏览器可视区的右侧设置滚动条，通过调整滚动条来调整可视区显示的内容。

但是，用户通过滚动条调整可视区显示的网页内容时，常常会不小心调整过多，需要重新调整才能显示需要的内容。并且，在调整滚动条时页面显示内容会随着滚动条调整，用户需要重新查找才能确定需要查看的内容，操作不便。

因此，目前需要本领域技术人员迫切解决的一个技术问题就是：提出一种网页显示方法，以解决网页显示的问题。

技术实现要素：

本申请实施例所要解决的技术问题是提供一种网页显示方法，以解决网页显示的问题。

相应的，本申请实施例还提供了一种网页显示装置，用以保证上述方法的实现及应用。

为了解决上述问题，本申请公开了一种网页显示方法，包括：在显示网页时，依据所述定位属性将所述网页的当前屏内容显示在浏览器的可视区内，其中，所述网页包括至少两屏内容，每屏内容设置有定位属性；获取滚 动交互事件，判断是否滚动到所述当前屏内容的边缘；当滚动到所述当前屏内容的边缘时，依据所述定位属性跳转到所述当前屏内容的相邻屏内容，在所述可视区中显示所述相邻屏内容；当未滚动到所述当前屏内容的边缘时，滚动显示所述当前屏内容。

可选的，所述屏内容的类型包括第一类型和第二类型；所述第一类型的屏内容设置有第一定位属性；所述第二类型的屏内容设置有第二定位属性，且所述第二类型的屏内容具有附加的页眉和/或页脚。

可选的，所述各屏内容还设置有堆叠属性，所述堆叠属性用于按照显示顺序排列为各屏内容，其中，首屏内容的堆叠属性的属性值最大，末屏内容的堆叠属性的属性值最小。

可选的，依据所述定位属性，将所述网页的当前屏内容显示在浏览器的可视区内，包括：所述当前屏内容为第二类型时，依据第二定位属性，将当前屏内容的主内容的长和宽配置为满屏；将附加的页眉设置到所述浏览器的可视区之上，和/或，将附加的页脚设置到所述浏览器的可视区之下；在所述浏览器的可视区内显示所述主内容。

可选的，判断是否滚动到所述当前屏内容的边缘，包括：当所述屏内容设置有第一定位属性时，确定滚动到所述当前屏内容的边缘；当所述屏内容设置有第二定位属性时，依据展示内容判断是否滚动到当前屏内容的边缘，其中，展示内容为页脚的底部或页眉的顶部时，判断滚动到当前屏内容的边缘。

可选的，获取滚动交互事件之后，所述的方法还包括：依据所述滚动交互事件确定滚动方向，其中，所述滚动方向包括向上滚动或向下滚动。

可选的，依据所述定位属性跳转到所述当前屏内容的相邻屏内容，包括：当为向上滚动且当前屏内容为非第一屏内容时，依据所述定位属性跳转到所述当前屏内容的上一屏内容；当为向下滚动且当前屏内容为非最后一屏内容时，依据所述定位属性跳转到所述当前屏内容的下一屏内容。

可选的，当所述屏内容为第二定位属性时，滚动显示所述当前屏内容，包括：当为向上滚动时，从所述当前屏内容的主内容滚动显示当前屏内容的 页眉；当为向下滚动时，从所述当前屏内容的主内容滚动显示当前屏内容的页尾。

可选的，还包括：在所述可视区中显示所述相邻屏内容后，在预置时间内获取相同滚动交互事件，不执行滚动操作。

本申请实施例还公开了一种网页显示装置，包括：显示模块，用于在显示网页时，依据所述定位属性将所述网页的当前屏内容显示在浏览器的可视区内；以及在跳转到所述当前屏内容的相邻屏内容后，在所述可视区中显示满屏显示所述相邻屏内容；其中，所述网页包括至少两屏内容，每屏内容设置有定位属性；获取模块，用于获取滚动交互事件；滚动模块，用于判断是否滚动到所述当前屏内容的边缘，当滚动到所述当前屏内容的边缘时，依据所述定位属性跳转到所述相邻屏内容；当未滚动到所述当前屏内容的边缘时，滚动显示所述当前屏内容。

可选的，所述屏内容的类型包括第一类型和第二类型；所述第一类型的屏内容设置有第一定位属性；所述第二类型的屏内容设置有第二定位属性，且所述第二类型的屏内容具有附加的页眉和/或页脚。

可选的，所述各屏内容还设置有堆叠属性，所述堆叠属性用于按照显示顺序排列为各屏内容，其中，首屏内容的堆叠属性的属性值最大，末屏内容的堆叠属性的属性值最小。

可选的，所述显示模块，用于所述当前屏内容为第二类型时，依据第二定位属性，将当前屏内容的主内容的长和宽配置为满屏；将附加的页眉设置到所述浏览器的可视区之上，和/或，将附加的页脚设置到所述浏览器的可视区之下；在所述浏览器的可视区内显示所述主内容。

可选的，所述滚动模块，包括：边缘判断子模块，用于当所述屏内容设置有第一定位属性时，确定滚动到所述当前屏内容的边缘；当所述屏内容设置有第二定位属性时，依据展示内容判断是否滚动到当前屏内容的边缘，其中，展示内容为页脚的底部或页眉的顶部时，判断滚动到当前屏内容的边缘。

可选的，所述滚动模块，还包括：方向判断子模块，用于依据所述滚动交互事件确定滚动方向，其中，所述滚动方向包括向上滚动或向下滚动。

可选的，所述滚动模块，包括：跳转显示子模块，用于当为向上滚动且当前屏内容为非第一内容时，依据所述定位属性跳转到所述当前屏内容的上一屏内容；当为向下滚动且当前屏内容为非最后一屏内容时，依据所述定位属性跳转到所述当前屏内容的下一屏内容。

可选的，所述滚动模块，包括：滚定显示子模块，用于对所述屏内容为第二定位属性，当为向上滚动时，从所述当前屏内容的主内容滚动显示当前屏内容的页眉；当为向下滚动时，从所述当前屏内容的主内容滚动显示当前屏内容的页尾。

可选的，所述滚动模块，还用于在所述可视区中显示显示所述相邻屏内容后，在预置时间内获取相同滚动交互事件，不执行滚动操作。

与现有技术相比，本申请实施例包括以下优点：

在本申请实施例中，在展示网页时先依据定位属性将当前屏内容显示在浏览器的可视区内，而在此后接收到滚动交互事件后，在未达到边缘时滚动显示当前屏内容，而在滚动到边缘时直接跳转到相邻屏内容，相邻屏内容作为当前屏内容显示时也是在可视区内全屏显示，从而不同屏之间直接跳转显示，而不会出现滚动过多等页面问题，便于查看页面内容。

附图说明

图1是本申请的一种网页显示方法实施例的步骤流程图；

图2是本申请实施例中网页配置方法的步骤流程图；

图3是本申请的一种网页显示方法实施例的步骤流程图；

图4是本申请一种网页显示装置实施例的结构框图；

图5是本申请另一种网页显示装置实施例的结构框图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

本申请实施例的核心构思之一在于，提供一种网页显示方法和装置，以解决网页显示的问题。在展示网页时先依据定位属性将当前屏内容显示在浏览器的可视区内，而在此后接收到滚动交互事件后，在未达到边缘时滚动显示当前屏内容，而在滚动到边缘时直接跳转到相邻屏内容，相邻屏内容作为当前屏内容显示时也是在可视区内全屏显示，从而不同屏之间直接跳转显示，而不会出现滚动过多等页面问题，便于查看页面内容。

实施例一

参照图1，示出了本申请的一种网页显示方法实施例的步骤流程图，具体可以包括如下步骤：

步骤102，在显示网页时，依据所述定位属性将所述网页的当前屏内容显示在浏览器的可视区内。

为了便于用户查看网页，本实施例在创建网页时即对网页的页面内容进行划分，其中可以按照屏幕显示对页面内容进行划分，将在浏览器可视区中一次同时显示的内容划分为一屏内容，则网页内容至少划分两屏内容。其中，在网页设计领域中，一屏指绝大部分用户的浏览器显示网页的有效可视区域，即一屏为浏览器的可视区显示区域，浏览器的可视区为浏览器显示网页的部分。在划分完页面内容后分别为每屏内容设置定位属性，定位属性指的是网页显示时页面元素显示位置相关的属性，通过定位属性在显示各屏内容时进行定位。

从而用户在使用浏览器显示该网页时，对于网页中的各屏内容，当某一屏内容作为焦点在浏览器中显示时，将该屏内容作为当前屏内容。依据定位属性设置当前屏内容在浏览器中的显示，即依据该定位属性的属性值将当前屏内容显示在浏览器的可视区内，其中，一屏即为浏览器的可视区，因此当前屏内容可以显示可视区内，如满屏显示，即铺满该可视区进行显示。

步骤104，获取滚动交互事件。

在网页中显示好当前屏内容后，用户可以通过鼠标等外置设备发出滚动交互事件使网页滚动显示各屏内容，对于智能手机、平板电脑等触摸屏设备 浏览器中显示的网页，也可以通过手指、触摸笔等滑动发出滚动交互事件。网页对应可以获取在其上的滑动交互事件。即滚动交互事件是通过滚动鼠标滚轮、使用触摸屏的滚动手势或者按键盘中的上、下、home、end及空格键等在触发后能够更新一个网页的可视部分(显示的屏内容)的事件

步骤106，判断是否滚动到所述当前屏内容的边缘。

网页中通常一屏内容是浏览器可视区内一次展示的内容，但是有些屏内容可能还存在页眉、页脚等内容，因此一次滚动并不一定滚动到该屏内容的边缘，而各屏内容对于处于边缘和非边缘时的滚动操作不同，因此还可以依据该滚动交互事件判断是否滚动到了当前屏内容的边缘。

若是，即滚动到所述当前屏内容的边缘，执行步骤108；若否，即非滚动到所述当前屏内容的边缘，执行步骤110。

步骤108，依据所述定位属性跳转到所述相邻屏内容，在所述可视区中显示满屏显示所述相邻屏内容。

当滚动到所述当前屏内容的边缘时，此时继续滚动就会到当前屏内容的相邻屏内容，如向上滚动则会显示上一屏内容，向下滚动相应显示下一屏内容，本实施例在展示每屏通常都是独立展示的，因此依据所述定位属性跳转到所述当前屏内容的相邻屏内容，然后在所述可视区中显示满屏显示所述相邻屏内容，即跳转后该相邻屏内容即为当前屏内容，依据定位属性同样在可视区内满屏显示该屏内容。

步骤110，滚动显示所述当前屏内容。

当未滚动到所述当前屏内容的边缘时，该屏内容未显示完毕，暂时无需跳转到显示相邻屏内容，此时可以滚动显示所述当前屏内容，如向下滚动时显示页脚部分的内容，向上滚动时显示页眉部分的内容。

从而在展示网页时先依据定位属性将当前屏内容满屏显示在浏览器的可视区内，而在此后接收到滚动交互事件后，在未达到边缘时滚动显示当前屏内容，而在滚动到边缘时直接跳转到相邻屏内容，相邻屏内容作为当前屏内容显示时也是在可视区内全屏显示，从而不同屏之间直接跳转显示，而不会出现滚动过多等页面问题，便于查看页面内容。

实施例二

本发明实施例依据网页的配置，对网页中不同屏内容可以直接跳转显示，因此不会出现仅滚动调整页面内容时的显示问题。

参照图2，给出了本申请实施例中网页配置方法的步骤流程图，具体页面配置过程如下：

步骤202，通过对网页的页面内容进行划分确定至少两屏内容。

步骤204，判断各屏内容是否具有页眉和/或页脚。

若否，即该屏内容不具有页眉和/或页脚，执行步骤206；若是，即该屏内容具有页眉和/或页脚，执行步骤208。

步骤206，该屏内容的类型为第一类型，将所述第一类型的屏内容配置为第一属性。

步骤208，该屏内容的类型为第二类型，将所述第二类型的屏内容配置为第二属性。

步骤210，设置各屏内容的堆叠属性，以按照显示顺序排列各屏内容。

在设置网页时，对网页的页面内容进行划分，划分条件可以依据需求确定，例如在初始设置时即设置好每屏内容，从而每个网页划分出至少两屏内容。再检测该屏内容是否具有页眉和/或页脚，若具有页眉和/或页脚则为第一类型，将该屏内容设置为第一定位属性，反之，若不具有页眉和/或页脚即为第二类型，将第二类型的屏内容设置为第二定位属性。

由于网页中各屏内容通常会按照一定的顺序进行展示，因此还可以为各屏内容配置堆叠属性，该堆叠属性用于确定各屏内容的显示顺序。将网页的第一屏内容称为首屏内容，最后一屏内容称为末屏内容，则在设置堆叠属性时，首屏内容的堆叠属性的属性值最大，末屏内容的堆叠属性的属性值最小。

本申请实施例中，定位属性可以采用网页CSS(Cascading Style Sheets，层叠样式表)的position属性，position属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它 在正常流中的默认位置偏移。position属性包括：

Static(默认值)：元素会被放在默认的地方，没有定位，元素出现在正常的流中(忽略top、bottom、left、right或者z-index声明)。

Absolute：生成绝对定位的元素，，相对于static定位以外的第一个父元素进行定位，元素会被放在浏览器内的某个位置(依top、bottom、left、和right的值而定)。当用户将网页往下拉时，元素也会跟着改变位置。

Relative：生成相对定位的元素，相对于其正常位置进行定位，元素被放的地方将会与预设的地方有所不同。不同的程度是依照top、bottom、left、和right的值而定。

Fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，元素会被放在浏览器内的某个位置(依top、bottom、left、和right的值而定)。当用户将网页往下拉时，元素的位置不会改变。

相应的，堆叠属性设置为CSS的z-index属性，该属性用于设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

在采用position属性设置时，将fixed属性作为第一定位属性，将absolute属性作为第二定位属性，则不具有页眉和/或页脚的第一类型屏内容即设置为fixed属性，将具有页眉和/或页脚的第二类型屏内容设置为position属性。则对于第二类型的屏内容，设置position属性为fixed的盒子，宽和高分别设置成100％铺满整个屏幕。对于第二属性的屏内容，将页眉、页脚作为附加内容，则屏初始满屏显示的内容为主内容，设置主内容的position属性为absolute的盒子，宽高分别设置成100％，铺满整个屏幕；对于页脚，将高度为x的页脚添加进这个盒子中，设置position属性为absolute并将bottom属性设置成负x；对于页眉，将高度为y的页眉添加到该盒子中，设置position属性为absolute并将top属性设置成负y。然后给各屏内容添加z-index属性，首屏内容的堆叠属性的属性值最大，末屏内容的堆叠属性的属性值最小，保证前些部分覆盖在后一部分的上方。本申请实施例中，上述fixed属性和position属性均相对于浏览器窗口进行定位。

通过上述网页设置中各屏内容定位属性和堆叠属性，实现对网页中各屏内容的显示配置。本申请实施例还在网页代码中配置了对网页滚动显示过程的逻辑判断规则，以确定在接收到滚动交互事件后的滚动显示方式。例如，编写JavaScript函数，将页面的初始滚动位置设置到顶部，创建函数f监听滚动交互事件，在函数f中阻止当前事件的默认行为。从而将网页自定义的滚动事件和默认滚动事件向结合，使得显示更加流畅。

基于上述属性和逻辑规则，网页显示以及滚动过程如下：

参照图3，示出了本申请的一种网页显示方法实施例的步骤流程图，具体可以包括如下步骤：

步骤302，依据所述定位属性将所述网页的当前屏内容显示在浏览器的可视区内。

在当前屏内容为第一类型时，依据定位属性将长和宽设置为满屏，从而将当前屏内容满屏显示在浏览器的可视区内，如依据fixed属性，宽和高分别设置成100％铺满整个屏幕。

所述当前屏内容为第二类型时，依据第二定位属性，将当前屏内容的主内容的长和宽配置为满屏，如依据主内容的absolute属性，宽高分别设置成100％，铺满整个屏幕。然后，依据top属性将附加的页眉设置到所述浏览器的可视区之上，和/或，依据bottom属性将附加的页脚设置到所述浏览器的可视区之下，从而在浏览器的可视区内满屏显示当前屏内容的主内容。

步骤304，获取滚动交互事件。

步骤306，依据所述滚动交互事件确定滚动方向。

用户通过鼠标等外置设备控制页面显示，或者在触摸屏设备中通过手指、触摸笔等滑动屏幕，相应网页获取滚动交互事件。然后判断该滚动交互事件对应的滚动方向，其中，所述滚动方向包括向上滚动或向下滚动。

步骤308，判断是否滚动到所述当前屏内容的边缘。

在滚动显示网页的各屏内容时，是否滚动到当前屏内容的边缘，网页显示的内容存在区别。本发明一个可选实施例中，判断是否滚动到所述当前屏内容的边缘，包括：当所述屏内容设置有第一定位属性时，确定滚动到所述 当前屏内容的边缘；当所述屏内容设置有第二定位属性时，依据展示内容判断是否滚动到当前屏内容的边缘，其中，展示内容为页脚的底部或页眉的顶部时，判断滚动到当前屏内容的边缘。

其中，当前屏内容为第一类型时其定位属性可以为第一定位属性，该屏内容不包括页眉、页脚等内容，即全部内容均显示在浏览器的可视区中，因此对于第一类型的当前屏内容，可以确定已滚动到所述当前屏内容的边缘。

当前屏内容为第二类型时其定位属性可以为第二定位属性，该屏内容包括主内容以及页眉、页脚等附加内容，即在浏览器的可视区初始仅显示主内容，而未显示附加内容，因此对于第二类型的当前屏内容，可以依据在可视区内实际展示内同判断是否滚动到当前屏内容的边缘。若可视区内仅显示主内容，则未滚动到边缘；若当前屏内容包括页脚，进一步判断是否达到页脚的底部，若达到页脚底部判断已滚动到下边缘；若当前屏内容包括页眉，进一步判断是否达到页眉的顶部，若达到页眉底部判断已滚动到上边缘。

若是，即确定滚动到当前屏内容的边缘，在向上滚动时执行步骤310，在向下滚动时执行步骤314。若否，即未滚动到当前屏内容的边缘，在向上滚动时执行步骤318，在向下滚动时执行步骤320。

步骤310，判断当前屏内容是否为首屏内容。

确定滚动到当前屏内容的上边缘且为向上滚动时，判断当前屏内容是否为首屏内容。若否，即向上滚动非首屏内容时，执行步骤312。

若是，即将首屏内容向上滚动时，此时已经达到网页的上边缘，无法继续向上滚动，则不执行其他操作。

步骤312，依据所述定位属性调整到所述当前屏内容的上一屏内容。

确定滚动到当前屏内容的上边缘，且是向上滚动非首屏内容即非第一屏内容时，依据定位属性跳转到所述当前屏内容的上一屏内容，然后将上一屏内容作为当前屏内容，返回步骤302，在浏览器的可视区内满屏显示。

步骤314，判断当前屏内容是否为尾屏内容。

确定滚动到当前屏内容的下边缘且为向下滚动时，判断当前屏内容是否为尾屏内容。若否，即向下滚动非尾屏内容，执行步骤316。

若是，即将尾屏内容向下滚动，此时已经达到了网页的下便于，无法继续向下滚动，则不执行其他操作。

步骤316，依据所述定位属性调整到所述当前屏内容的下一屏内容。

确定滚动到当前屏内容的下边缘，且是向下滚动非尾屏内容即非最后一屏内容时，依据所述定位属性调整到所述当前屏内容的下一屏内容，然后将下一屏内容作为当前屏内容，返回步骤302，在浏览器的可视区内满屏显示。

步骤318，从所述当前屏内容的主内容滚动显示当前屏内容的页眉。

当未滚动到当前屏内容的上边缘，并且要继续向上滚动时，可以放行默认的滚动方式，即从所述当前屏内容的主内容滚动显示当前屏内容的页眉。

步骤320，从所述当前屏内容的主内容滚动显示当前屏内容的页尾。

当未滚动到当前屏内容的下边缘，并且要继续向下滚动时，可以放行默认的滚动方式，即从所述当前屏内容的主内容滚动显示当前屏内容的页尾。

从而将网页中自定义的各屏之间跳转的显示方式，和一屏内容中主内容和附加内容之间默认滚动方式向结合，为用户提供更好更独特的体验。

本发明一个可选实施例中，针对触摸屏设备中显示的网页，对于一次触摸生成的滚动交互事件，在确定要向上或下一个屏内容跳转时，可以暂时不执行该跳转操作，而是在基于接收到相同的滚动交互事件后再执行跳转。

本申请另一个可选实施例中，在所述可视区中显示满屏显示所述相邻屏内容后，在预置时间内获取相同滚动交互事件，不执行滚动操作。即在发生一次滚动之后的一段时间delta接收到相同的滚动交互事件，即需要执行同方向滚动，则此时可以不执行上述网页显示判断逻辑过程，以防止由于用户误操作引起滚动过度，如连续跳转过多屏内容。其中，delta值可以依据需求设定，如设置为80毫秒。

例如，将网页划分为两屏显示内容，第一屏内容(首屏内容)为第一类型，设置为fixed属性，宽和高分别设置成100％铺满整个屏幕。第二屏内容(尾屏内容)为第一类型，设置为absolute属性，宽和高分别设置成100％铺满整个屏幕。

对首屏内容执行自定义滚动效果的，则向下滚动一次之后，跳转进入网 页的尾屏内容，此滚动过程中，无论滑动距离或鼠标滚轮的滚动距离有多长都不会引起跳转到的尾屏内容的滚动。在进入显示尾屏内容后，更改为改变为默认滚动效果，可以向下任意滚动，也可以向上滚动任意距离。该滚动过程中，从下连续的滚动到尾屏内容的顶部并继续连续向上滚动时，可以设置为不跳转进入首屏内容，但是，在已经滚动到尾屏内容的顶部后，再向上滚动就会跳转到首屏内容。具体滚动逻辑如下：

a，获取滚动交互事件，获取滚动的距离等信息(其中，向下为正、向上为负)，并执行以下逻辑：

i，判断为向下滚动时，

-如果当前部分是最后一部分(即尾屏内容)，

则无作为，得到默认滚动效果。

-如果当前部分不是最后一部分，

则切换到下一个部分。

如果这个将要切换到的部分是最后一部分，

则开始放行当前事件的默认行为。

ii，判断为向上滚动时：

-如果当前部分是最后一部分，

且网页的滚动位置不在顶部，

则无作为，得到默认滚动效果。

-如果当前部分是最后一部分，

且网页的滚动位置在顶部，

则切换到上一个部分，

并开始阻止当前事件的默认行为。

-如果当前部分不是最后一部分，

则在还有上一个部分的情况下，切换到上一个部分。

其中，如果在发生一次滚动之后的一段时间delta内发生同方向的滚动，则不执行任何逻辑过程。

本申请实施例中，可以采用HTML、CSS、JavaScript等计算机语言在网 页实现上述设置，网页的运行环境可以为IE8以上的Internet Explorer和Chrome、Firefox、Opera、Safari等浏览器。

本实施例中，当一个网页的内容过长超出可视区时，将会在浏览器可视区右侧出现滚动条指示当前可视部分在这个网页的位置，用户可以通触发滚动交互事件过来调整这个网页的可视部分，即对于第二类型的屏内容在主内容和附加内容之间滚动调整显示的方式，即为网页中的默认滚动方式。

网页中的脚本在阻止滚动交互事件默认效果的基础上，自定义了在用户触发滚动交互事件时呈现的网页的可视部分的更换效果，如在不同屏内容之前滚动跳转显示的方式为网页中的自定义滚动方式，该方式能够进一步提升用户获得的体验。

其中，网页中的页脚(footer)可以是一个网站中一系列网页所共有的底部内容，通常包含一些友情链接、合作伙伴、法务描述等，如上述实施例中设置在尾屏内容中。网页中任一屏内容均可以设置页眉、页脚，本申请实施例对此不做限定。

通过上述实施例，将网页中的自定义滚动方式和页面中的默认滚动方式结合，从而实现多种滚动方式交互展示。使得本发明实施例的页面展示方式可以应用于各种场景中，如：

如果一个网页由若干屏内容组成，对前几个屏内容想要在滚动时幻灯播放式的切换，则可以设置为第一类型并配置第一定位属性，而最后一个部分(尾屏内容)想要自由的滚动以在主内容和共有页脚之间自由浏览，则可以设置为第二类型并配置第二定位属性。从而在网页中将自定义滚动方式和默认滚动方式相结合，让前几个屏内容是自定义滚动的，从而实现幻灯播放式的切换，使得用户在浏览这个网页前些部分时可以获得自定义滚动效果的优良体验，而切换到尾屏内容后放行默认滚动，使得用户在浏览到网页的尾屏内容时可以流畅的滚动，查看网站共有的页脚，提高整体的用户体验。。

通过控制滚动交互事件的阻止和放行，判定每一次有效滚动交互事件，对HTML加以特定的CSS样式修饰，有效的将网页中的自定义滚动方式和默认滚动方式相结合来增强了用户体验。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请实施例并不受所描述的动作顺序的限制，因为依据本申请实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本申请实施例所必须的。

实施例三

在上述实施例的基础上，本实施例还提供了一种网页显示装置。

参照图4，示出了本申请一种网页显示装置实施例的结构框图，具体可以包括如下模块：

显示模块402，用于在显示网页时，依据所述定位属性将所述网页的当前屏内容满屏显示在浏览器的可视区内；以及在跳转到所述当前屏内容的相邻屏内容后，在所述可视区中显示满屏显示所述相邻屏内容；其中，所述网页数据对应网页包括至少两屏内容，每屏内容设置有定位属性。

获取模块404，用于获取滚动交互事件。

滚动模块406，用于判断是否滚动到所述当前屏内容的边缘，当滚动到所述当前屏内容的边缘时，依据所述定位属性跳转到所述当前屏内容的相邻屏内容；当未滚动到所述当前屏内容的边缘时，滚动显示所述当前屏内容。

从而在展示网页时先依据定位属性将当前屏内容满屏显示在浏览器的可视区内，而在此后接收到滚动交互事件后，在未达到边缘时滚动显示当前屏内容，而在滚动到边缘时直接跳转到相邻屏内容，相邻屏内容作为当前屏内容显示时也是在可视区内全屏显示，从而不同屏之间直接跳转显示，而不会出现滚动过多等页面问题，便于查看页面内容。

参照图5，示出了本申请另一种网页显示装置实施例的结构框图，具体可以包括如下模块：

显示模块502，用于在显示网页时，依据所述定位属性将所述网页的当前屏内容满屏显示在浏览器的可视区内；以及在跳转到所述当前屏内容的相邻屏内容后，在所述可视区中显示满屏显示所述相邻屏内容；其中，所述网 页数据对应网页包括至少两屏内容，每屏内容设置有定位属性。

获取模块504，用于获取滚动交互事件。

滚动模块506，用于判断是否滚动到所述当前屏内容的边缘，当滚动到所述当前屏内容的边缘时，依据所述定位属性跳转到所述当前屏内容的相邻屏内容；当未滚动到所述当前屏内容的边缘时，滚动显示所述当前屏内容。

其中，所述屏内容的类型包括第一类型和第二类型；所述第一类型的屏内容设置有第一定位属性；所述第二类型的屏内容设置有第二定位属性，且所述第二类型的屏内容具有附加的页眉和/或页脚。

所述各屏内容还设置有堆叠属性，所述堆叠属性用于按照显示顺序排列为各屏内容，其中，首屏内容的堆叠属性的属性值最大，末屏内容的堆叠属性的属性值最小；所述网页的第一屏内容称为首屏内容，所述网页的最后一屏内容称为末屏内容。

通过上述网页设置中各屏内容定位属性和堆叠属性，实现对网页中各屏内容的显示配置。本申请实施例还在网页代码中配置了对网页滚动显示过程的逻辑判断规则，以确定在接收到滚动交互事件后的滚动显示方式。例如，编写JavaScript函数，将页面的初始滚动位置设置到顶部，创建函数f监听滚动交互事件，在函数f中阻止当前事件的默认行为。从而将网页自定义的滚动事件和默认滚动事件向结合，使得显示更加流畅。

本申请一个可选实施例中，所述显示模块502，用于所述当前屏内容为第二类型时，依据第二定位属性，将当前屏内容的主内容的长和宽配置为满屏；将附加的页眉设置到所述浏览器的可视区之上，和/或，将附加的页脚设置到所述浏览器的可视区之下；在所述浏览器的可视区内满屏显示所述主内容。

本申请另一个可选实施例中，所述滚动模块506，包括：

边缘判断子模块50602，用于当所述屏内容为第一定位属性时，确定滚动到所述当前屏内容的边缘；当所述屏内容为第二定位属性时，依据展示内容判断是否滚动到当前屏内容的边缘，其中，展示内容为页脚的底部或页眉的顶部时，判断滚动到当前屏内容的边缘。

方向判断子模块50604，用于依据所述滚动交互事件确定滚动方向，其中，所述滚动方向包括向上滚动或向下滚动。

跳转显示子模块50606，用于当为向上滚动且当前屏内容为非首屏内容时，依据所述定位属性跳转到所述当前屏内容的上一屏内容；当为向下滚动且当前屏内容为非尾屏内容时，依据所述定位属性跳转到所述当前屏内容的下一屏内容。

滚定显示子模块50608，用于对所述屏内容为第二定位属性，当为向上滚动时，从所述当前屏内容的主内容滚动显示当前屏内容的页眉；当为向下滚动时，从所述当前屏内容的主内容滚动显示当前屏内容的页尾。

所述滚动模块506，还用于在所述可视区中显示满屏显示所述相邻屏内容后，在预置时间内获取相同滚动交互事件，不执行滚动操作。

本申请实施例中，可以采用HTML、CSS、JavaScript等计算机语言在网页实现上述设置，网页的运行环境可以为IE8以上的Internet Explorer和Chrome、Firefox、Opera、Safari等浏览器。

本实施例中，当一个网页的内容过长超出可视区时，将会在浏览器可视区右侧出现滚动条指示当前可视部分在这个网页的位置，用户可以通触发滚动交互事件过来调整这个网页的可视部分，即对于第二类型的屏内容在主内容和附加内容之间滚动调整显示的方式，即为网页中的默认滚动方式。

网页中的脚本在阻止滚动交互事件默认效果的基础上，自定义了在用户触发滚动交互事件时呈现的网页的可视部分的更换效果，如在不同屏内容之前滚动跳转显示的方式为网页中的自定义滚动方式，该方式能够进一步提升用户获得的体验。

其中，网页中的页脚(footer)可以是一个网站中一系列网页所共有的底部内容，通常包含一些友情链接、合作伙伴、法务描述等，如上述实施例中设置在尾屏内容中。网页中任一屏内容均可以设置页眉、页脚，本申请实施例对此不做限定。

通过上述实施例，将网页中的自定义滚动方式和页面中的默认滚动方式结合，从而实现多种滚动方式交互展示。使得本发明实施例的页面展示方式 可以应用于各种场景中，如：

如果一个网页由若干屏内容组成，对前几个屏内容想要在滚动时幻灯播放式的切换，则可以设置为第一类型并配置第一定位属性，而最后一个部分(尾屏内容)想要自由的滚动以在主内容和共有页脚之间自由浏览，则可以设置为第二类型并配置第二定位属性。从而在网页中将自定义滚动方式和默认滚动方式相结合，让前几个屏内容是自定义滚动的，从而实现幻灯播放式的切换，使得用户在浏览这个网页前些部分时可以获得自定义滚动效果的优良体验，而切换到尾屏内容后放行默认滚动，使得用户在浏览到网页的尾屏内容时可以流畅的滚动，查看网站共有的页脚，提高整体的用户体验。。

通过控制滚动交互事件的阻止和放行，判定每一次有效滚动交互事件，对HTML加以特定的CSS样式修饰，有效的将网页中的自定义滚动方式和默认滚动方式相结合来增强了用户体验。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本申请实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

在一个典型的配置中，所述计算机设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的 示例。计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非持续性的电脑可读媒体(transitory media)，如调制的数据信号和载波。

本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本申请所提供的一种网页显示方法和一种网页显示装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。