CN111949264A - 一种页面元素的定位方法及移动终端 - Google Patents

Abstract

本发明公开了一种页面元素的定位方法，包括：从页面中获取目标元素；确定目标元素对应的定位模式是固定定位模式还是粘性定位模式；如果是粘性定位模式，则判断浏览器是否支持粘性定位模式，如果支持，则基于粘性定位模式对目标元素进行定位；如果不支持，则：确定与目标元素相对应的滚动参考容器、定位父级容器，并对滚动参考容器进行滚动事件监听，以判断滚动参考容器是否等于浏览器窗口；如果不等于浏览器窗口，则根据目标元素、相应的定位父级容器、滚动参考容器的位置信息对目标元素进行定位。本发明一并公开了相应的移动终端。根据本发明的技术方案，考虑浏览器的配置来选择定位方式，有利于更流畅、稳定地实现对目标元素的吸附效果。

Description

一种页面元素的定位方法及移动终端

技术领域

本发明涉及移动终端开发技术领域，尤其涉及一种页面元素的定位方法及移动终端。

背景技术

元素Affix效果是指浏览器页面滚动时，将页面元素吸附在可视范围内的现象。目前的技术方案都是通过对页面进行Scroll滚动事件监听，并设置CSS position：fixed(这里是指浏览器视口的顶部边缘与指定元素顶部边缘的距离)来实现，要想在所有平台的浏览器中实现这种效果，需要依赖一些优秀的Javascript类库(例如bootstrap的affix插件)。

但，上述实现Affix效果的技术方案，实现方式都是监听页面滚动，并切换HTML元素ClassName(实际使用CSS:position:fixed/static切换)来模拟元素定位，并且都是基于浏览器视口viewport来定位。对于一些低端浏览器而言，会产生滚动监听的性能损耗，另外，有些低端浏览器不能实现页面内某子滚动容器的内部Affix效果。

再者，Fixed定位是以浏览器视口为基准的，那么在子容器内滚发生时，元素不能在容器内实现Affix效果。基于此，在容器内滚场景下，上述技术方案无法实现多个同层级元素交替实现Affix效果。

另外，在高端浏览器上，其原生通过设置CSS position:sticky即可实现内滚现成的功能。如果在高端浏览器上，基于JS类库设置CSS position:fixed来模拟实现Affix效果，代表放弃了高端浏览器原生设置position：sticky实现内滚的效果，滚动监听在高端浏览器上会造成性能浪费。

此外，如果基于Sticky来实现Affix效果，对于高端浏览器而言，这种Sticky方案会大大提高性能。但，对于那些处于HTML body元素的一级子元素来说，采用Sticky实现Affix效果虽然会有质的提升，但在某些场景下会与传统Affix视觉效果不一致。

可见，上述实现Affix效果的技术方案均有一定的场景限制。

为此，需要一种可以根据浏览器种类来对页面元素进行定位的方法，来解决上述技术方案中存在的问题。

发明内容

为此，本发明提供一种页面元素的定位方法及移动终端，以解决或至少缓解上面存在的问题。

根据本发明的一个方面，提供了一种页面元素的定位方法，在移动终端中执行，所述移动终端驻留有适于渲染页面的浏览器，所述方法包括步骤：从页面中获取一个或多个目标元素；确定所述目标元素对应的定位模式是固定定位模式还是粘性定位模式；如果确定所述目标元素的定位模式是粘性定位模式，则判断所述浏览器是否支持粘性定位模式，如果支持，则基于粘性定位模式对目标元素进行定位；如果浏览器不支持粘性定位模式，则：确定与所述目标元素相对应的滚动参考容器、定位父级容器，并对所述滚动参考容器进行滚动事件监听，以判断所述滚动参考容器是否等于浏览器窗口；以及如果所述滚动参考容器不等于浏览器窗口，则根据目标元素、相应的定位父级容器、滚动参考容器的位置信息对目标元素进行定位。

可选地，在根据本发明的页面元素的定位方法中，判断所述滚动参考容器是否等于浏览器窗口的步骤还包括：如果所述滚动参考容器等于浏览器窗口，则对目标元素进行滚动事件监听，以判断目标元素是否滚动至浏览器窗口的顶部边缘；在确定目标元素滚动至浏览器窗口的顶部边缘时，对目标元素进行固定定位。

可选地，在根据本发明的页面元素的定位方法中，根据目标元素、定位父级容器、滚动参考容器的位置信息对目标元素进行定位的步骤包括：基于所述位置信息确定目标元素到滚动参考容器顶部边缘的距离、目标元素到父级定位容器顶部边缘的距离；确定目标元素的滚动距离、定位位置相对于滚动参考容器顶部边缘的预定偏移值；基于滚动距离与目标元素到滚动参考容器顶部边缘的距离、目标元素到父级定位容器顶部边缘的距离、预定偏移值之间的关系来对目标元素进行绝对定位。

可选地，在根据本发明的页面元素的定位方法中，对目标元素进行绝对定位的步骤进一步包括：当SD＜AR+HP-AP-HA-D时，其中，SD表示滚动距离，AR表示目标元素到滚动参考容器顶部边缘的距离，HP表示父级定位容器高度，AP表示目标元素到父级定位容器顶部边缘的距离，HA表示目标元素高度，D表示预定偏移值：在所述目标元素的初始位置建立占位元素，并基于所述父级定位容器对所述目标元素进行绝对定位；以及设置CSS top值＝SD-AR+AP+D,并删除CSS bottom值。

可选地，在根据本发明的页面元素的定位方法中，对目标元素进行绝对定位的步骤还包括：当SD＜AR+HP–AP时，其中，SD表示滚动距离，AR表示目标元素到滚动参考容器顶部边缘的距离，HP表示父级定位容器高度，AP表示目标元素到父级定位容器顶部边缘的距离：在所述目标元素的初始位置建立占位元素，并基于所述父级定位容器对所述目标元素进行绝对定位；以及设置CSS bottom值等于0，并删除CSS top值。

可选地，在根据本发明的页面元素的定位方法中，对目标元素进行绝对定位的步骤还包括：当SD≤AR-D时，其中，SD表示滚动距离，AR表示目标元素到滚动参考容器顶部边缘的距离，D表示预定偏移值:不对目标元素进行定位。

可选地，在根据本发明的页面元素的定位方法中，对目标元素进行绝对定位的步骤还包括：当目标元素对应的父级定位容器滚动至所述滚动参考容器之外时，不再对目标元素进行定位，并移除在所述目标元素的初始位置建立的占位元素。

可选地，在根据本发明的页面元素的定位方法中，还包括步骤：如果目标元素的定位模式是固定定位模式，则判断所述浏览器是否支持粘性定位模式；如果支持，则基于粘性定位模式对目标元素进行定位；如果不支持，则对目标元素进行滚动监听，以判断目标元素是否滚动至在浏览器窗口的顶部边缘，并在确定目标元素滚动至浏览器窗口的顶部边缘时，对目标元素进行固定定位。

可选地，在根据本发明的页面元素的定位方法中，在判断浏览器是否支持粘性定位模式之前，还包括步骤：判断所述目标元素是否是页面主体的子级。

可选地，在根据本发明的页面元素的定位方法中，还包括步骤：从服务器请求获取页面，所述页面中封装有处理装置；所述处理装置适于执行所述页面元素的定位方法。

根据本发明的一个方面，提供了一种移动终端，包括：至少一个处理器；以及存储有程序指令的存储器，其中，所述程序指令被配置为适于由所述至少一个处理器执行，所述程序指令包括用于执行如上所述方法的指令。

根据本发明的一个方面，提供了一种存储有程序指令的可读存储介质，当所述程序指令被移动终端读取并执行时，使得所述移动终端执行如上所述方法。

根据本发明的技术方案，通过在页面文档中封装处理装置，在浏览器请求获取到页面之后，处理装置便驻留在移动终端中。处理装置可以获取页面中需要锁定在预定位置实现吸附效果的目标元素，在对目标元素进行定位时，可以根据页面中相应的配置项来判断与目标元素相对应的定位方式，以便通过对目标元素进行相应的定位设置来实现目标元素的吸附效果。并且，在确定目标元素的定位方式之后，还会综合考虑浏览器的性能、属性，基于浏览器所适配的定位模式，结合页面中目标元素的配置，再最终确定对目标元素的定位方式。这样，在通过浏览器渲染页面、实现对目标元素的吸附效果时，充分考虑了浏览器的种类和配置，对于不同的浏览器会为目标元素选择相应的定位方式，从而可以尽可能地发挥浏览器的性能、而又不会过度消耗浏览器性能，更有利于浏览器渲染页面的稳定性、在页面滚动时更流畅、稳定地实现对目标元素的吸附效果。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明一个实施例的移动终端100的示意图；

图2示出了根据本发明一个实施例的页面元素的定位方法200的流程图；

图3a～图3d分别示出了根据本发明一个实施例的页面300的示意图；以及

图4示出了根据本发明一个实施例的移动终端100的示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1示出了根据本发明一个实施例的移动终端100的结构图。移动终端100可以是配置有前置摄像头和显示屏幕的手机、平板电脑、笔记本电脑、多媒体播放器、可穿戴设备等，但不限于此。如图1所示，移动终端100可以包括存储器接口102、多核处理器104，以及外围接口106。

存储器接口102、多核处理器104和/或外围接口106既可以是分立元件，也可以集成在一个或多个集成电路中。在移动终端100中，各种元件可以通过一条或多条通信总线或信号线来耦合。传感器、设备和子系统可以耦合到外围接口106，以便帮助实现多种功能。

例如，加速度传感器110、磁场传感器112和重力传感器114可以耦合到外围接口106，加速度传感器110可以采集在机身坐标系的三个坐标轴方向上的加速度数据，磁场传感器112可以采集在机身坐标系的三个坐标轴方向上的磁场数据(磁感应强度)，重力传感器114可以采集在机身坐标系的三个坐标轴上的重力数据，以上传感器可以方便实现计步、定向、横竖屏智能切换等功能。其他传感器116同样可以与外围接口106相连，例如定位系统(例如GPS接收机)、温度传感器、生物测定传感器或其他感测设备，由此可以帮助实施相关的功能。

相机子系统120和光学传感器122可以用于方便诸如记录照片和视频剪辑的相机功能的实现，其中所述相机子系统和光学传感器例如可以是电荷耦合器件(CCD)或互补金属氧化物半导体(CMOS)光学传感器。可以通过一个或多个无线通信子系统124来帮助实现通信功能，其中无线通信子系统可以包括射频接收机和发射机和/或光(例如红外)接收机和发射机。无线通信子系统124的特定设计和实施方式可以取决于移动终端100所支持的一个或多个通信网络。例如，移动终端100可以包括被设计成支持LTE、3G、GSM网络、GPRS网络、EDGE网络、Wi-Fi或WiMax网络以及BlueboothTM网络的通信子系统124。

音频子系统126可以与扬声器128以及麦克风130相耦合，以便帮助实施启用语音的功能，例如语音识别、语音复制、数字记录和电话功能。I/O子系统140可以包括触摸屏控制器142和/或一个或多个其他输入控制器144。触摸屏控制器142可以耦合到触摸屏146。举例来说，该触摸屏146和触摸屏控制器142可以使用多种触摸感测技术中的任何一种来检测与之进行的接触和移动或是暂停，其中感测技术包括但不局限于电容性、电阻性、红外和表面声波技术。一个或多个其他输入控制器144可以耦合到其他输入/控制设备148，例如一个或多个按钮、摇杆开关、拇指旋轮、红外端口、USB端口、和/或指示笔之类的指点设备。所述一个或多个按钮(未显示)可以包括用于控制扬声器128和/或麦克风130音量的向上/向下按钮。

存储器接口102可以与存储器150相耦合。该存储器150可以包括内部存储器和外部存储器，内部存储器例如可以是静态随机存取存储器(SRAM)、非易失性存储器(NVRAM)等，但不限于此；外部存储器例如可以是硬盘、可移动硬盘、U盘等，但不限于此。存储器150可以存储程序指令，程序指令例如可以包括操作系统152和应用154。操作系统152例如可以是Android、iOS、Windows Phone等，其包括用于处理基本系统服务以及执行依赖于硬件的任务的程序指令。存储器150还可以存储应用154，应用154可以包括用于实现各种用户期望的功能的程序指令。应用154可以是独立于操作系统提供的，也可以是操作系统自带的。另外，应用154被安装到移动终端100中时，也可以向操作系统添加驱动模块。在移动设备运行时，会从存储器150中加载操作系统152，并且由处理器104执行。应用154在运行时，也会从存储器150中加载，并由处理器104执行。应用154运行在操作系统之上，利用操作系统以及底层硬件提供的接口实现各种用户期望的功能，如硬件管理、即时通信、网页浏览等。

在一个实施例中，上述各种应用154中包括一种或多种适于渲染页面的浏览器160，还包括处理装置400。处理装置400包括适于执行本发明的页面元素的定位方法200的多条程序指令，以便通过处理装置400执行本发明的页面元素的定位方法200。处理装置400可以驻留在移动终端(例如前述移动终端100)中，以使移动终端100执行本发明的页面元素的定位方法200。

应当指出，在根据本发明的页面元素的定位方法200中，移动终端100预先从服务器请求获取页面。

图4示出了根据本发明一个实施例的移动终端100的示意图。

如图4所示，移动终端100中驻留有适于加载页面的浏览器160，通过浏览器160向服务器请求获取页面300。页面例如是HTML页面，但，本发明对页面300的具体类型也不作限制。移动终端100的屏幕显示区域可用于显示页面。

从服务器获取的页面文档中封装有适于执行本发明的页面元素的定位方法300的处理装置400，从而，在移动终端100通过浏览器获取页面300之后，处理装置400便驻留在移动终端100中，例如驻留在获取该页面300的浏览器160中。

图2示出了根据本发明一个实施例的页面元素的定位方法200的流程图。方法200适于在移动终端100中执行。如图2所示，方法200适于步骤S210。

在步骤S210中，从页面中获取一个或多个目标元素(affixTarget)。这里，目标元素即是在页面滚动过程中，需要将其锁定在预定位置、实现Affix吸附效果的页面元素。在一种实施方式中，通过在页面文档中对要实现吸附效果的目标元素进行标记，从而，处理装置400便可以基于标记从页面中找到目标元素。

应当指出，对页面元素进行定位、将其锁定在预定位置实现吸附效果，需要基于CSS定位页面内容。

在一个实施例中，在页面滚动过程中，是通过对目标元素进行定位，使目标元素锁定在浏览器窗口的顶部边缘，以实现对目标元素的吸顶效果。

由于在实际应用中，页面垂直方向的滚动居多，故，在本发明的实施例中，均会以垂直方向为例对本发明的技术方案进行具体说明。并且，以CSS top(顶部边缘)为参考点进行描述。

随后，在步骤S220中，确定目标元素对应的定位模式是固定定位模式(Fixed)还是粘性定位模式(Sticky)。

需要说明的是，对页面元素进行定位的方式包括：

position:fixed(固定定位，即是相对于浏览器窗口对元素进行定位)；

position:static(默认值，没有定位，元素出现在正常的文档流中)；

position:absolute(绝对定位，是相对于static定位以外的第一个父级元素进行定位)；

position:sticky(粘性定位，表现为当元素在视口内时，元素位置是相对的，当元素在视口外部时，元素位置是固定的)。

在步骤S230中，如果确定目标元素的定位模式是粘性定位模式，则判断浏览器160是否原生支持粘性定位模式。如果确定浏览器160原生支持粘性定位模式(说明是较为高端的浏览器)，则基于粘性定位模式(Sticky)对目标元素进行定位。

需要说明的是，当移动终端通过浏览器160获取到页面时，无论目标元素对应的定位模式是固定定位模式(Fixed)还是粘性定位模式(Sticky)，封装在页面文件中的处理装置400都会判断浏览器160是否原生支持粘性定位模式。

根据一个实施例，如果确定目标元素的定位模式是固定定位模式(Fixed)，则先判断目标元素是否是页面主体元素(body)的直接子级，如果是，再判断浏览器160是否原生支持粘性定位模式。

这里，如果浏览器160原生支持粘性定位模式，则会基于粘性定位模式对目标元素进行定位。如果浏览器160原生不支持粘性定位模式，则使用现有的固定定位方法，通过对目标元素绑定滚动事件监听函数，对目标元素进行滚动事件监听，以便判断目标元素是否滚动至浏览器窗口的顶部边缘。并在确定目标元素滚动至浏览器窗口的顶部边缘时，对目标元素进行固定定位。

可见，根据本发明的方法，并不一定以页面文档中元素的配置项来执行对目标元素的定位方式。在基于对目标元素定位来实现目标元素的吸附效果时，会综合考虑浏览器160的性能、属性，并基于浏览器150所适配的定位模式，来选择对目标元素的定位方式，充分考虑了浏览器的种类和配置，对于不同的浏览器会为目标元素选择相应的定位方式，从而可以尽可能地发挥浏览器的性能、而又不会过度消耗浏览器性能，更有利于浏览器渲染页面的稳定性、在页面滚动时更流畅地实现对目标元素的吸附效果。

进一步地，在步骤S240中，如果浏览器160不支持粘性定位模式(说明是较为低端的浏览器)，则确定与目标元素相对应的滚动参考容器(scrollRefer)、定位父级容器(offseParent)。这里，页面文档中可以包括对元素配置的相关配置项，这样，处理装置400可以基于页面文档中元素的相关配置项，来确定与目标元素相对应的滚动参考容器、定位父级容器。这里，如果在页面文档中没有指定配置目标元素的滚动参考容器值，则默认为滚动参考容器是顶级文档流。另外，页面文档中还可以配置与视觉相关的展示配置项(CSSstyle)。

在确定目标元素对应的滚动参考容器后，对滚动参考容器绑定滚动事件监听函数，基于滚动事件监听函数对滚动参考容器进行滚动事件监听。通过滚动事件监听函数判断滚动参考容器是否等于浏览器窗口，从而根据滚动参考容器是否等于浏览器窗口来执行不同的逻辑。

具体地，在步骤S250中，如果确定滚动参考容器不等于浏览器窗口，也就是说，滚动参考容器是子容器，目标元素以及相应的定位父级容器在子容器内滚动。在此情况下，会基于定位父级容器在滚动参考容器中的可见状态来确定相应的定位方法。具体而言，是根据目标元素、相应的定位父级容器、滚动参考容器的位置信息对目标元素进行定位，并且，需要计算目标元素及其定位父级容器在滚动参考容器内产生的滚动距离。这里，位置信息例如包括页面元素的尺寸信息(包括宽度信息、高度信息)、与其它元素的相对距离信息等。应当指出，在获取页面并加载完成之后，页面中各个元素的尺寸信息是确定的，并且，目标元素相对于滚动参考容器的顶部边缘的距离也是确定的。

另外，如果确定滚动参考容器等于浏览器窗口，即是相对于浏览器窗口对目标元素进行定位，也就相当于是固定定位模式(position:fixed)。这样，便可以使用现有的固定定位方法，通过对目标元素绑定滚动事件监听函数，对目标元素进行滚动事件监听，从而能判断目标元素是否滚动至浏览器窗口的顶部边缘。并在确定目标元素滚动至浏览器窗口的顶部边缘时，对目标元素进行固定定位。

根据一个实施例，根据目标元素、定位父级容器、滚动参考容器的位置信息对目标元素进行定位具体可以按照以下方法执行：

基于位置信息确定目标元素到滚动参考容器顶部边缘的距离AR、目标元素到父级定位容器顶部边缘的距离AP。

计算、确定目标元素在滚动参考容器内的相对滚动距离SD。另外，还需要确定定位位置相对于滚动参考容器顶部边缘的预定偏移值D。这里，定位位置即是控制目标元素吸附的位置。例如，当预定偏移值D＝0时，即是控制目标元素直接吸附在滚动参考容器的顶部边缘。

进而，基于滚动距离SD与目标元素到滚动参考容器顶部边缘的距离AR、目标元素到父级定位容器顶部边缘的距离AP、预定偏移值D之间的关系来对目标元素进行绝对定位。

图3a～图3d分别示出了根据本发明一个实施例的页面300的示意图。应当指出，图3a～图3d所示出的页面300中，各个目标元素、定位父级容器在滚动参考容器内相对滚动的位置不同(产生的滚动距离不同)、可见状态不同。

其中，在图3a～图3d中,外边框区域表示浏览器窗口(viewport)；浅灰色区域表示滚动参考容器(scrollRefer)，本实施例中的滚动参考容器为不等于浏览器窗口的子容器；深灰色区域表示多个同级别的目标元素(affixTarget)；首字母(大写字母)相同的元素(包括相应的目标元素)共同组成定位父级容器(offseParent)。

例如，在图3a～图3d中,A-affixTarget、A-child1、A-child2、A-child3、A-child4、A-child5共同组成一个定位父级容器(首字母均为A)；B-affixTarget、B-child1、B-child2、B-child3、B-child4、B-child5共同组成一个定位父级容器(首字母均为B)，这里不再一一列举。

为了便于描述，在本发明的实施例中，用SD表示目标元素及相应的定位父级容器在滚动参考容器内产生的滚动距离，AR表示目标元素到滚动参考容器顶部边缘的距离，HP表示父级定位容器高度，AP表示目标元素到父级定位容器顶部边缘的距离，HA表示目标元素高度，D表示预定偏移值。

根据一个实施例，如图3a所示，在对目标元素进行绝对定位时，如果SD≤AR-D，参见图3a示出的页面300中的目标元素A-affixTarget，则不对目标元素进行绝对定位(不为目标元素设置position:absolute)。并且，无论是否对该目标元素设置过绝对定位(添加过吸附效果)、是否建立过占位元素，都会进行对绝对定位的相关设置的移除、以及对占位元素的移除。

根据一个实施例，如图3b所示，在对目标元素进行绝对定位时，如果SD＜AR+HP-AP-HA-D，参见图3b示出的页面300中的目标元素A-affixTarget，则在目标元素的初始位置建立占位元素(affixTargetHolder)，并基于父级定位容器对目标元素进行绝对定位(为目标元素设置position:absolute)，以模拟实现吸附效果。另外，还设置CSS top值＝SD-AR+AP+D,并删除CSS bottom值。

根据一个实施例，如图3c所示，在对目标元素进行绝对定位时，如果SD＜AR+HP–AP，参见图3c示出的页面300中的目标元素A-affixTarget，则在目标元素的初始位置建立占位元素，并基于父级定位容器对目标元素进行绝对定位(为目标元素设置position:absolute)，以模拟实现吸附效果。另外，还设置CSS bottom值等于0，并删除CSS top值。

根据一个实施例，如图3d所示，在对目标元素进行绝对定位时，如果目标元素对应的父级定位容器滚动至滚动参考容器的外部，参见图3d示出的页面300中的目标元素A-affixTarget，则不再对目标元素进行定位，并移除在目标元素的初始位置建立的占位元素、并移除对目标元素的绝对定位的相关设置。

需要说明的是，图3a～图3d所示出的页面300，涵盖了目标元素、定位父级容器在滚动参考容器内相对滚动位置的几种不同情况，针对这四种不同的相对滚动位置，以上实施例中分别提供了相应的计算方法来判定，当通过上述计算方法确定目标元素当前在滚动参考容器内的相对位置属于哪种情况(即是对应图3a～图3d中的其中一个)之后，便可以基于上述实施例中提供的定位方式、相关设置来对目标元素进行相应的定位和设置。

A9、如A8所述的页面元素的定位方法，其中，在判断浏览器是否支持粘性定位模式之前，还包括步骤：判断所述目标元素是否是页面主体的子级。

A10、如A1-A9任一项所述的，其中，还包括步骤：从服务器请求获取页面，所述页面中封装有处理装置；所述处理装置适于执行所述页面元素的定位方法。

这里描述的各种技术可结合硬件或软件，或者它们的组合一起实现。从而，本发明的方法和设备，或者本发明的方法和设备的某些方面或部分可采取嵌入有形媒介，例如可移动硬盘、U盘、软盘、CD-ROM或者其它任意机器可读的存储介质中的程序代码(即指令)的形式，其中当程序被载入诸如计算机之类的机器，并被所述机器执行时，所述机器变成实践本发明的设备。

在程序代码在可编程计算机上执行的情况下，移动终端一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和/或存储元件)，至少一个输入装置，和至少一个输出装置。其中，存储器被配置用于存储程序代码；处理器被配置用于根据该存储器中存储的所述程序代码中的指令，执行本发明的页面元素的定位方法。

以示例而非限制的方式，可读介质包括可读存储介质和通信介质。可读存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据，并且包括任何信息传递介质。以上的任一种的组合也包括在可读介质的范围之内。

在此处所提供的说明书中，算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与本发明的示例一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组件可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的而非限制性的，本发明的范围由所附权利要求书限定。

Claims (10)

1.一种页面元素的定位方法，在移动终端中执行，所述移动终端驻留有适于渲染页面的浏览器，所述方法包括步骤：

从页面中获取一个或多个目标元素；

确定所述目标元素对应的定位模式是固定定位模式还是粘性定位模式；

如果确定所述目标元素的定位模式是粘性定位模式，则判断所述浏览器是否支持粘性定位模式，如果支持，则基于粘性定位模式对目标元素进行定位；

如果浏览器不支持粘性定位模式，则：确定与所述目标元素相对应的滚动参考容器、定位父级容器，并对所述滚动参考容器进行滚动事件监听，以判断所述滚动参考容器是否等于浏览器窗口；以及

如果所述滚动参考容器不等于浏览器窗口，则根据目标元素、相应的定位父级容器、滚动参考容器的位置信息对目标元素进行定位。

2.如权利要求1所述的页面元素的定位方法，其中，判断所述滚动参考容器是否等于浏览器窗口的步骤还包括：

如果所述滚动参考容器等于浏览器窗口，则对目标元素进行滚动事件监听，以判断目标元素是否滚动至浏览器窗口的顶部边缘；

在确定目标元素滚动至浏览器窗口的顶部边缘时，对目标元素进行固定定位。

3.如权利要求1或2所述的页面元素的定位方法，其中，根据目标元素、定位父级容器、滚动参考容器的位置信息对目标元素进行定位的步骤包括：

基于所述位置信息确定目标元素到滚动参考容器顶部边缘的距离、目标元素到父级定位容器顶部边缘的距离；

确定目标元素的滚动距离、定位位置相对于滚动参考容器顶部边缘的预定偏移值；

基于滚动距离与目标元素到滚动参考容器顶部边缘的距离、目标元素到父级定位容器顶部边缘的距离、预定偏移值之间的关系来对目标元素进行绝对定位。

4.如权利要求3所述的页面元素的定位方法，其中，对目标元素进行绝对定位的步骤进一步包括：

当SD＜AR+HP-AP-HA-D时，其中，SD表示滚动距离，AR表示目标元素到滚动参考容器顶部边缘的距离，HP表示父级定位容器高度，AP表示目标元素到父级定位容器顶部边缘的距离，HA表示目标元素高度，D表示预定偏移值：

在所述目标元素的初始位置建立占位元素，并基于所述父级定位容器对所述目标元素进行绝对定位；以及

设置CSS top值＝SD-AR+AP+D,并删除CSS bottom值。

5.如权利要求3或4所述的页面元素的定位方法，其中，对目标元素进行绝对定位的步骤还包括：

当SD＜AR+HP–AP时，其中，SD表示滚动距离，AR表示目标元素到滚动参考容器顶部边缘的距离，HP表示父级定位容器高度，AP表示目标元素到父级定位容器顶部边缘的距离：

在所述目标元素的初始位置建立占位元素，并基于所述父级定位容器对所述目标元素进行绝对定位；以及

设置CSS bottom值等于0，并删除CSS top值。

6.如权利要求3-5任一项所述的页面元素的定位方法，其中，对目标元素进行绝对定位的步骤还包括：

当SD≤AR-D时，其中，SD表示滚动距离，AR表示目标元素到滚动参考容器顶部边缘的距离，D表示预定偏移值:

不对目标元素进行定位。

7.如权利要求3-6任一项所述的页面元素的定位方法，其中，对目标元素进行绝对定位的步骤还包括：

当目标元素对应的父级定位容器滚动至所述滚动参考容器之外时，不再对目标元素进行定位，并移除在所述目标元素的初始位置建立的占位元素。

8.如权利要求1-7任一项所述的页面元素的定位方法，其中，还包括步骤：

如果目标元素的定位模式是固定定位模式，则判断所述浏览器是否支持粘性定位模式；

如果支持，则基于粘性定位模式对目标元素进行定位；

如果不支持，则对目标元素进行滚动监听，以判断目标元素是否滚动至在浏览器窗口的顶部边缘，并在确定目标元素滚动至浏览器窗口的顶部边缘时，对目标元素进行固定定位。

9.一种移动终端，包括：

至少一个处理器；以及

存储器，存储有程序指令，其中，所述程序指令被配置为适于由所述至少一个处理器执行，所述程序指令包括用于执行如权利要求1-8中任一项所述方法的指令。

10.一种存储有程序指令的可读存储介质，当所述程序指令被移动终端读取并执行时，使得所述移动终端执行如权利要求1-8中任一项所述方法。

Images