CN110888584A

CN110888584A - 一种页面内容显示控制方法和装置

Info

Publication number: CN110888584A
Application number: CN201811054686.7A
Authority: CN
Inventors: 宋小兵
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Jingdong Shangke Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Jingdong Shangke Information Technology Co Ltd
Priority date: 2018-09-11
Filing date: 2018-09-11
Publication date: 2020-03-17

Abstract

本申请提供了一种页面内容显示控制方法和装置，该方法包括：当检测到拖动第一区域中的滚动条触发的事件时，记录滚动条被拖动的方向；并根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离；控制第二区域向与记录的滚动条被拖动的方向相反的方向滚动所述确定的距离，并通过第三区域显示第三区域与第二区域重合的第二区域的页面内容；其中，第一区域为滚动区，第二区域为期望显示区，第三区域为实际显示区，第一区域、第二区域、第三区域为同一页面上的区域，第二区域与第三区域重叠之外的区域隐藏显示。该方法能够自定义滚动条的多种样式，实现多个页面之间样式的统一替换，且兼容性好。

Description

一种页面内容显示控制方法和装置

技术领域

本发明涉及互联网应用技术领域，特别涉及一种页面内容显示控制方法和装置。

背景技术

用户在生活、工作以及学习中，经常使用浏览器登录网站，进而从页面中获取所需要的各种信息。如用户经常使用导航类网站、搜索类网站或者购物类网站等。

现有技术中，页面中所显示的内容较多时，页面中能够显示内容的区域的大小往往不能满足需求，往往在页面中采用滚动条的方式来实现上下翻看页面内容。

滚动条的样式基本都是各个浏览器厂商默认，部分样式可以修改但不能完全被替换，不能满足业务开发的需求；

各个页面，如浏览器之间的样式替换方案不统一，如IE的写法和chrome浏览器的写法不一致；兼容性差，如有的样式比如圆角，有的浏览器不支持，还有比如透明度等都不支持。

发明内容

有鉴于此，本申请提供一种页面内容显示控制方法和装置，能够自定义滚动条的多种样式，实现多个页面之间样式的统一替换，且兼容性好。

为解决上述技术问题，本申请的技术方案是这样实现的：

一种页面内容显示控制方法，该方法包括：

当检测到拖动第一区域中的滚动条触发的事件时，记录滚动条被拖动的方向；并根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离；

控制第二区域向与记录的滚动条被拖动的方向相反的方向滚动所述确定的距离，并通过第三区域显示第三区域与第二区域重合的第二区域的页面内容；

其中，第一区域为滚动区，第二区域为期望显示区，第三区域为实际显示区，第一区域、第二区域、第三区域为同一页面上的区域，第二区域与第三区域重叠之外的区域隐藏显示。

一种页面内容显示控制装置，该装置包括：检测单元、记录单元、确定单元、控制单元和显示单元；

所述检测单元，用于检测事件；

所述记录单元，用于当所述检测单元检测到拖动第一区域中的滚动条触发的事件时，记录滚动条被拖动的方向；

所述确定单元，用于当所述检测单元检测到拖动第一区域中的滚动条触发的事件时，根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离；

所述控制单元，用于控制第二区域向与所述记录单元记录的滚动条被拖动的方向相反的方向滚动所述确定单元确定的距离；

所述显示单元，用于通过第三区域显示所述控制单元控制滚动确定的距离后第三区域与第二区域重合的第二区域的页面内容；其中，第一区域为滚动区，第二区域为期望显示区，第三区域为实际显示区，第一区域、第二区域、第三区域为同一页面上的区域，第二区域与第三区域重叠之外的区域隐藏显示。

一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法。

一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述方法。

由上面的技术方案可知，本申请中的页面包括第一区域、第二区域、第三区域和滚动条，第二区域与第三区域重叠之外的区域隐藏显示；这样在检测到拖动第一区域中的滚动条触发的事件时时，根据滚动条被拖动的距离确定第二区域滚动的区域，进而控制第二区域滚动，通过第三区域显示第二区域的页面内容。该方案通过滚动条滚动的距离与第二区域滚动距离的联动，能够实现所有带有滚动条页面的内容显示，从而能够自定义滚动条的多种样式，实现多个页面之间样式的统一替换，且兼容性好。

附图说明

图1为本申请实施例中的区域架构示意图；

图2为本申请实施例一中页面内容显示控制流程示意图；

图3为实施例一中滚动条被拖动过程示意图；

图4为本申请实施例二中页面内容显示控制流程示意图；

图5为本申请实施例中onmousewheel事件发生之前的区域关系示意图；

图6为本申请实施例中onmousewheel事件发生后的区域关系示意图；

图7为本申请实施例中应用于上述技术的装置结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，下面结合附图并举实施例，对本发明的技术方案进行详细说明。

本申请实施例中页面包括第一区域、第二区域、第三区域和滚动条，第二区域与第三区域重叠之外的区域隐藏显示；这样在检测到拖动第一区域中的滚动条触发的事件时时，根据滚动条被拖动的距离确定第二区域滚动的区域，进而控制第二区域滚动，通过第三区域显示第二区域的页面内容。该方案通过滚动条滚动的距离与第二区域滚动距离的联动，能够实现所有带有滚动条页面的内容显示，从而能够自定义滚动条的多种样式，实现多个页面之间样式的统一替换，且兼容性好。

带有滚动条的页面的内容显示，存在多种应用，如浏览器滚动条、窗口滚动条、页面内容的下拉框滚动条、内容区域的滚动条等。

本申请实施例中可应用于任一种带有滚动条页面的内容显示，能够满足各种业务开发的需求。

本申请实施例中针对一个页面划分多个区域，包括：第一区域、第二区域、第三区域和滚动条；

其中，第一区域为滚动区，第二区域为期望显示区，第三区域为实际显示区，滚动条能在第一区域中滚动。

具体实现时，第二区域和第三区域为同一层；第一区域在第三区域的上一层；滚动条所在层为第一区域所在层的里面，且显示在第一区域的上方，第一区域所显示的位置区域为第三区域的空闲区域。

其中，第一区域针对第三区域的具体显示位置，可以根据实际页面的布局需要确定，不对具体位置进行限定，本申请实施例中以显示在第三区域的右侧或底部空闲区域为例。

针对确定的页面中的第一区域、第二区域、第三区域，以及滚动条需要预先设置一个预设比例，由于实际应用中，有的滚动条是纵向滚动，有的是横向滚动，两种滚动方式设置预设比例的原理相同，只是一个使用纵向高度，一个使用横向宽度，具体设置过程如下：

针对纵向滑动的滚动条，根据确定的页面中的第一区域、第二区域、第三区域，以及滚动条的高度设置一个预设比例，具体设置过程如下：

R＝(C-D)/(HA-HB)；

其中，R为预设比例，C为第一区域的高度，D为滚动条的高度，HA为第二区域的高度，HB为第三区域的高度，HB＝C。

针对横向滚动的滚动条，根据确定的页面中的第一区域、第二区域、第三区域，以及滚动条的高度设置一个预设比例，具体设置过程如下：

R＝(X-Y)/(WA-WB)；

其中，R为预设比例，X为第一区域的宽度，D为滚动条的宽度，WA为第二区域的宽度，WB为第三区域的宽度，WB＝X。

参见图1，图1为本申请实施例中的区域架构示意图。

图1中，以纵向滚动条为例，第一区域位于第三区域的右侧空闲区域，且第一区域和第三区域的高度相同；

第二区域的高度大于第三区域的高度，且宽度相同。

滚动条可在第一区域中滚动。

下面通过两个实施例分别描述页面内容显示控制过程。

需要说明的是，本申请实施例中所涉及的终端可以包括但不限于个人计算机(Personal Computer，PC)、个人数字助理(Personal Digital Assistant，PDA)、无线手持设备、平板电脑(Tablet Computer)、手机、MP3播放器、MP4播放器等。

实施例一和实施例二中的执行主体可以为页面内容显示装置，该装置可以位于本地终端的应用，或者还可以为位于本地终端的应用中的插件或软件开发工具包(SoftwareDevelopment Kit，SDK)等功能单元，本发明实施例对此不进行特别限定。

实施例一

针对拖动第一区域中的滚动条触发的事件控制页面内容显示的过程。

参见图2，图2为本申请实施例一中页面内容显示控制流程示意图。具体步骤为：

步骤201，当检测到拖动第一区域中的滚动条触发的事件时，记录滚动条被拖动的方向；并根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离。

这里拖动第一区域中的滚动条触发的事件，可以为检测到通过鼠标拖动第一区域中的滚动条触发的onmousemove事件时；也可以为通过触摸屏滑动的拖动第一区域中的滚动条触发的事件。

当检测到拖动第一区域中的滚动条触发的事件时，延迟预设时间，再执行根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离步骤。

这里的预设时间可以为100ms，这样能够防止拖动滚动条的过程中不断执行事件，能够提高设备处理效率。

本申请实施例中在具体实现延迟时，增加一个全局标识flag，比如当前开始延迟就写这个标识flag为true，下一个移动延迟之前判断如果这个标识为true，说明已有方法待执行，就丢弃不用执行，即不延迟也不执行，直到移动停止最后执行一次延迟。

本步骤中所述根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离，包括：

SA＝S×R；

其中，SA为第二区域滚动的距离；S为滚动条被拖动的距离，R为预设比例。

其中，滚动条被拖动的距离S确定过程为：

在事件被触发时，记录滚动条的上边界距离第三区域的上边界的距离Y1；

在滚动条被拖动过程中，不断获取滚动条上边界与第三区域的上边界的距离Y2；

则Y1与Y2的差值的绝对值即为滚动条被拖动的距离S。

参见图3，图3为实施例一中滚动条被拖动过程示意图。图3中以滚动条纵向滚动为例，滚动条初始位置为左侧第三区域所示，被拖动后的滚动条的位置为右侧第三区域所示。

由图3的示意图可见，滚动条滚动的效果为向下滚动，则Y1与Y2的差值为负。

步骤202，控制第二区域向与记录的滚动条被拖动的方向相反的方向滚动所述确定的距离，并通过第三区域显示第三区域与第二区域重合的第二区域的页面内容。

当纵向滚动时，控制第二区域向与滚动条被拖动的方向相反的方向滚动所述确定的距离，即拖动滚动条向第一区域(第三区域)的下边界滚动时，第二区域向第三区域的上边界滚动。

每当控制第二区域滚动后，通过第三区域显示第三区域与第二区域重合的第二区域的页面内容。

具体实现时，可以设置第二区域的上边界距离第三区域的上边界的值为初始第二区域相对于第三区域的上边界的值加上当前计算得到的SA，来达到滚动的效果，如果向上，将确定的距离SA作为负数相加，向下，则将SA作为整数相加，即向上减去SA，向下加上SA。

实施例二

针对滚动鼠标滚轮触发的鼠标滚轮滚动时触发的事件(onmousewheel)事件控制页面内容显示的过程。

参见图4，图4为本申请实施例二中页面内容显示控制流程示意图。具体步骤为：

步骤401，当检测到第二区域滚动触发的事件时，记录第二区域滚动的方向，并根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离。

检测到第二区域滚动触发的事件可以为检测到针对滚动鼠标滚轮触发的onmousewheel事件时，也可以为通过触屏滑动第二区域触发的事件。

当检测到第二区域滚动触发的事件时，延迟预设时间，再执行根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离的操作。

这里的预设时间可以为100ms，这样能够防止第一区域滚动过程中不断执行事件，能够提高设备处理效率。

本步骤中根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离，包括：

ST＝HT/R；

其中，ST为滚动条相对于第一区域滚动的距离；HT为第二区域滚动的距离；R为预设比例。

第二区域滚动的距离HT的确定过程：

以onmousewheel事件触发，且第二区域纵向滚动为例，记录的第二区域的上边界与第三区域的上边界的距离H1如图5所示，图5为本申请实施例中onmousewheel事件发生之前的区域关系示意图。

在第二区域滚动过程中，记录的第二区域的上边界与第三区域的上边界的距离H2如图6所示，图6为本申请实施例中onmousewheel事件发生后的区域关系示意图。

则H1与H2的差值的绝对值即为滚动条被拖动的距离ST。

由图5和图6的示意图可见，第二区域滚动的效果为向下滚动，则H1与H2的差值为正。

步骤402，控制滚动条向与记录的第二区域滚动的方向相反的方向滚动所述确定的距离，并通过第三区域显示第三区域与第二区域重合的第二区域的页面内容。

第二区域纵向移动时，控制第二区域向与滚动条被拖动的方向相反的方向滚动所述确定的距离，即第二区域向第三区域的下边界滚动，滚动条向第一区域(第三区域)的上边界滚动。

通过第三区域显示第三区域与第二区域重合的第二区域的页面内容。

具体实现时，可以设置滚动条的上边界距离第一区域的上边界的值为初始滚动条相对于第一区域的上边界的值加上当前计算得到的ST，来达到滚动的效果，如果向上，将确定的距离ST作为负数相加，向下，则将ST作为整数相加，即向上减去ST，向下加上ST。

在上述两个实施例中，无论任何事件，第三区域所在的位置始终不变。

本申请实施例中针对拖动第一区域中的滚动条触发的事件和第二区域滚动触发的事件提供的实现方式，相当于一种样式模板，不局限于某种应用场景，可以兼容所有样式，以满足业务开发需求；并且可以模拟各种样式的自带滚动条的功能效果。

本申请实施例中基于同样的发明构思，还提供一种页面内容显示控制装置。参见图7，图7为本申请实施例中应用于上述技术的装置结构示意图。该装置包括：检测单元701、记录单元702、确定单元703、控制单元704和显示单元705；

检测单元701，用于检测事件；

记录单元702，用于当检测单元701检测到拖动第一区域中的滚动条触发的事件时，记录滚动条被拖动的方向；

确定单元703，用于当检测单元701检测到拖动第一区域中的滚动条触发的事件时，根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离；

控制单元704，用于控制第二区域向与记录单元702记录的滚动条被拖动的方向相反的方向滚动确定单元703确定的距离；

显示单元705，用于通过第三区域显示控制单元704控制滚动确定的距离后第三区域与第二区域重合的第二区域的页面内容；其中，第一区域为滚动区，第二区域为期望显示区，第三区域为实际显示区，第一区域、第二区域、第三区域为同一页面上的区域，第二区域与第三区域重叠之外的区域隐藏显示。

较佳地，

确定单元703，具体用于根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离时，包括：SA＝S×R；其中，SA为第二区域滚动的距离；S为滚动条被拖动的距离，R为预设比例。

较佳地，

记录单元702，进一步用于当检测单元701检测到第二区域滚动触发的事件时，记录第二区域滚动的方向；

确定单元703，进一步用于当检测单元701检测到第二区域滚动触发的事件时，根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离；

控制单元704，进一步用于控制滚动条向与记录单元702记录的第二区域滚动的方向相反的方向滚动确定单元703确定的距离；

显示单元705，进一步用于通过第三区域显示控制单元704控制滚动确定的距离后第三区域与第二区域重合的第二区域的页面内容。

较佳地，

确定单元703，具体用于根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离时，包括：ST＝HT/R；其中，ST为滚动条相对于第一区域滚动的距离；HT为第二区域滚动的距离；R为预设比例。

较佳地，

确定单元703，进一步用于当检测单元701检测到拖动第一区域中的滚动条触发的事件时，延迟预设时间，根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离；当检测到第二区域滚动触发的事件时，时，延迟预设时间，根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离。

较佳地，

当滚动条为纵向滚动时，所述预设比例根据第一区域、第二区域、第三区域，以及滚动条的高度设置：R＝(C-D)/(HA-HB)；其中，R为预设比例，C为第一区域的高度，D为滚动条的高度，HA为第二区域的高度，HB为第三区域的高度，HB＝C。

较佳地，

当滚动条为横向滚动时，所述预设比例根据第一区域、第二区域、第三区域，以及滚动条的宽度设置：

R＝(X-Y)/(WA-WB)；

上述实施例的单元可以集成于一体，也可以分离部署；可以合并为一个单元，也可以进一步拆分成多个子单元。

另外，本申请实施例中还提供一种非瞬时计算机可读存储介质，所述非瞬时计算机可读存储介质存储指令，所述指令在由处理器执行时使得所述处理器执行如前述实施例中所描述的疲劳驾驶检测方法的步骤。

同时，还提出一种电子设备，所述电子设备包括如上所述的非瞬时计算机可读存储介质、以及可读取并执行所述非瞬时计算机可读存储介质中的所述指令的处理器。

另外，本申请实施例中还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如实施例一和实施例二中所述的方法步骤。

同时，还提出一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如实施例一和实施例二中所述的方法步骤。

综上所述，本申请中的页面包括第一区域、第二区域、第三区域和滚动条，第二区域与第三区域重叠之外的区域隐藏显示；这样在检测到拖动第一区域中的滚动条触发的事件时时，根据滚动条被拖动的距离确定第二区域滚动的区域，进而控制第二区域滚动，通过第三区域显示第二区域的页面内容。该方案通过滚动条滚动的距离与第二区域滚动距离的联动，能够实现所有带有滚动条页面的内容显示，从而能够自定义滚动条的多种样式，实现多个页面之间样式的统一替换，且兼容性好。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims

1.一种页面内容显示控制方法，其特征在于，该方法包括：

2.根据权利要求1所述的方法，其特征在于，所述根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离，包括：

SA＝S×R；

3.根据权利要求1所述的方法，其特征在于，所述方法进一步包括：

当检测到第二区域滚动触发的事件时，记录第二区域滚动的方向，并根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离；

控制滚动条向与记录的第二区域滚动的方向相反的方向滚动所述确定的距离，并通过第三区域显示第三区域与第二区域重合的第二区域的页面内容。

4.根据权利要求3所述的方法，其特征在于，所述根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离，包括：

ST＝HT/R；

5.根据权利要求3所述的方法，其特征在于，

当检测到拖动第一区域中的滚动条触发的事件时，所述根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离之前，所述方法进一步包括：

延迟预设时间，根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离；

当检测到第二区域滚动触发的事件时，所述根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离之前，所述方法进一步包括：

延迟预设时间，根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离。

6.根据权利要求1-5任一项所述的方法，其特征在于，当滚动条为纵向滚动时，所述预设比例根据第一区域、第二区域、第三区域，以及滚动条的高度设置：

R＝(C-D)/(HA-HB)；

7.根据权利要求1-5任一项所述的方法，其特征在于，当滚动条为横向滚动时，所述预设比例根据第一区域、第二区域、第三区域，以及滚动条的宽度设置：

R＝(X-Y)/(WA-WB)；

8.一种页面内容显示控制装置，其特征在于，该装置包括：检测单元、记录单元、确定单元、控制单元和显示单元；

所述检测单元，用于检测事件；

9.根据权利要求9所述的装置，其特征在于，

所述确定单元，具体用于根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离时，包括：SA＝S×R；其中，SA为第二区域滚动的距离；S为滚动条被拖动的距离，R为预设比例。

10.根据权利要求9所述的装置，其特征在于，

所述记录单元，进一步用于当所述检测单元检测到第二区域滚动触发的事件时，记录第二区域滚动的方向；

所述确定单元，进一步用于当所述检测单元检测到第二区域滚动触发的事件时，根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离；

所述控制单元，进一步用于控制滚动条向与所述记录单元记录的第二区域滚动的方向相反的方向滚动所述确定单元确定的距离；

所述显示单元，进一步用于通过第三区域显示所述控制单元控制滚动确定的距离后第三区域与第二区域重合的第二区域的页面内容。

11.根据权利要求9所述的装置，其特征在于，

所述确定单元，具体用于根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离时，包括：ST＝HT/R；其中，ST为滚动条相对于第一区域滚动的距离；HT为第二区域滚动的距离；R为预设比例。

12.根据权利要求9所述的装置，其特征在于，

所述确定单元，进一步用于当所述检测单元检测到拖动第一区域中的滚动条触发的事件时，延迟预设时间，根据滚动条被拖动的距离，以及预设比例确定第二区域滚动的距离；当检测到第二区域滚动触发的事件时，时，延迟预设时间，根据第二区域滚动的距离，以及预设比例确定滚动条相对于第一区域滚动的距离。

13.根据权利要求8-12任一项所述的装置，其特征在于，当滚动条为纵向滚动时，所述预设比例根据第一区域、第二区域、第三区域，以及滚动条的高度设置：R＝(C-D)/(HA-HB)；其中，R为预设比例，C为第一区域的高度，D为滚动条的高度，HA为第二区域的高度，HB为第三区域的高度，HB＝C。

14.根据权利要求8-12任一项所述的装置，其特征在于，当滚动条为横向滚动时，所述预设比例根据第一区域、第二区域、第三区域，以及滚动条的宽度设置：

R＝(X-Y)/(WA-WB)；

15.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-7任一项所述的方法。

16.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-7任一项所述的方法。