CN111209156A - 一种页面元素的检测方法、装置、设备和可读介质 - Google Patents

Abstract

本公开实施例公开了一种页面元素的检测方法、装置、设备和可读介质。其中，该方法包括：检测到当前页面滑动，则根据当前页面中预设的分类对象获取至少一个指定元素；获取与所述指定元素的标识对应的对象监控项的视口监控标识；根据所述视口监控标识确定所述指定元素是否在当前页面的视口展示。通过本公开实施例的技术方案，实现指定元素当前是否在视口展示的检测，无需采用JavaScript语言来同时监听每一个指定元素的滚动位置，解决了现有技术中内存占用大、页面滑动卡顿的问题，简化了多个指定元素的位置计算操作，提高了页面元素是否在视口的检测效率。

Description

一种页面元素的检测方法、装置、设备和可读介质

技术领域

本公开实施例涉及计算机处理技术，尤其涉及一种页面元素的检测方法、装置、设备和可读介质。

背景技术

在现有的页面展示中，为了满足用户对于页面中各元素展示效果的多样化需求，会为该页面中的指定元添加对应的页面展示效果；此时在页面滑动过程中，首先需要确定各指定元素的当前展示位置是否在页面视口中，从而为视口中的指定元素弹出对应的页面效果，展示给用户。

对于各指定元素是否在视口展示，通常采用JavaScript语言监听页面滑动过程中的滚动事件，通过滚动事件的回调函数来计算每一个指定元素的页面位置、元素尺寸以及滚动条位置，从而判断各指定元素是否在视口。

而由于页面中需添加页面展示效果的指定元素较多，此时使用JavaScript语言来监听页面的滚动位置，计算每一个页面元素的位置坐标，由于过多使用JavaScript会占用较大的内存空间，易造成页面滑动卡顿的情况。

发明内容

有鉴于此，本公开实施例提供了一种页面元素的检测方法、装置、设备和可读介质，解决了现有技术中内存占用大、页面滑动卡顿的问题，简化了多个指定元素的位置计算操作，提高了页面元素是否在视口的检测效率。

第一方面，本公开实施例提供了一种页面元素的检测方法，该方法包括：

检测到当前页面滑动，则根据当前页面中预设的分类对象获取至少一个指定元素；

获取与所述指定元素的标识对应的对象监控项的视口监控标识；

根据所述视口监控标识确定所述指定元素是否在当前页面的视口展示。

进一步的，所述指定元素包括第一子元素和第二子元素。

进一步的，获取与所述指定元素的标识对应的对象监控项的视口监控标识，包括：

获取与所述指定元素中第一子元素的标识对应的对象子监控项的视口子监控标识；

根据所述视口监控标识确定所述指定元素是否在当前页面的视口展示，包括：

根据所述视口子监控标识确定所述第一子元素是否在当前页面的视口展示。

进一步的，在根据所述视口子监控标识确定所述第一子元素是否在当前页面的视口展示之后，还包括：

若第一子元素在视口展示，则在当前页面中弹出所述第二子元素；

若第一子元素未在视口展示，则在当前页面中隐藏所述第二子元素。

进一步的，根据当前页面中预设的分类对象获取至少一个指定元素，包括：

在预先构建的分类对象库中查找对应的视口对象；

获取当前页面中与所述视口对象的标识匹配的至少一个指定元素。

第二方面，本公开实施例提供了一种页面元素的检测装置，该装置包括：

元素获取模块，用于检测到当前页面滑动，则根据当前页面中预设的分类对象获取至少一个指定元素；

监控标识获取模块，用于获取与所述指定元素的标识对应的对象监控项的视口监控标识；

元素检测模块，用于根据所述视口监控标识确定所述指定元素是否在当前页面的视口展示。

进一步的，所述指定元素包括第一子元素和第二子元素。

进一步的，所述监控标识获取模块，具体用于：

获取与所述指定元素中第一子元素的标识对应的对象子监控项的视口子监控标识；

所述元素检测模块，具体用于：

根据所述视口子监控标识确定所述第一子元素是否在当前页面的视口展示。

进一步的，所述页面元素的检测装置，还包括：

弹出模块，用于在根据所述视口子监控标识确定所述第一子元素是否在当前页面的视口展示之后，若第一子元素在视口展示，则在当前页面中弹出所述第二子元素；

隐藏模块，用于在根据所述视口子监控标识确定所述第一子元素是否在当前页面的视口展示之后，若第一子元素未在视口展示，则在当前页面中隐藏所述第二子元素。

进一步的，所述元素获取模块，包括：

视口对象查找单元，用于在预先构建的分类对象库中查找对应的视口对象；

元素获取单元，用于获取当前页面中与所述视口对象的标识匹配的至少一个指定元素。

第三方面，本公开实施例还提供了一种设备，该设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本公开任意实施例所述的页面元素的检测方法。

第四方面，本公开实施例提供了一种可读介质，其上存储有计算机程序，该程序被处理器执行时实现如本公开任意实施例所述的页面元素的检测方法。

本公开实施例提供的一种页面元素的检测方法、装置、设备和可读介质，通过在页面中预先配置对应的分类对象，并在检测到页面滑动时，根据该分类对象确定页面中对应的指定元素，获取各指定元素对应的对象监控项的视口监控标识，从而确定指定元素当前是否在视口展示，无需采用JavaScript语言来同时监听每一个指定元素的滚动位置，解决了现有技术中内存占用大、页面滑动卡顿的问题，简化了多个指定元素的位置计算操作，提高了页面元素是否在视口的检测效率。

附图说明

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

图1示出了本公开实施例提供的一种页面元素的检测方法的流程图；

图2示出了本公开实施例提供的另一种页面元素的检测方法的流程图；

图3示出了本公开实施例提供的页面滑动展示的界面示意图；

图4示出了本公开实施例提供的一种页面元素的检测装置的结构示意图；

图5示出了本公开实施例提供的一种设备的结构示意图。

具体实施方式

为使本公开的目的、技术方案和优点更加清楚，以下将参照本公开实施例中的附图，通过实施方式清楚、完整地描述本公开的技术方案，显然，所描述的实施例是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

图1示出了本公开实施例提供的一种页面元素的检测方法的流程图，本公开实施例可适用于在页面滑动过程中检测页面元素是否在视口展示的情况中。本实施例提供的一种页面元素的检测方法可以由本公开实施例提供的页面元素的检测装置来执行，该装置可以通过软件和/或硬件的方式来实现，并集成在执行本方法的设备中，在本实施例中执行本方法的设备可以是智能手机、平板电脑和笔记本等任意一种具备页面滑动展示功能的智能终端。

具体的，如图1所示，本公开实施例中提供的页面元素的检测方法可以包括如下步骤：

S110，检测到当前页面滑动，则根据当前页面中预设的分类对象获取至少一个指定元素。

其中，分类对象是根据页面中元素的功能特征不同对各个元素进行分类的对象。本实施例中分类对象可以是预先设定的层叠样式表(Cascading Style Sheets，CSS)伪类，通过该CSS伪类中针对的不同元素功能对各页面元素进行分类。

具体的，CSS是一种用来为结构化文档，如超文本标记语言(Hyper Text Mark-upLanguage，HTML)网页或可扩展标记语言(Extensible Markup Language，XML)应用，添加字体、间距和颜色等样式结构的计算机语言，由万维网联盟(World Wide Web Consortium，W3C)来定义和维护。其中，CSS主要用于定义如何显示结构化文档中的各个元素，样式可以直接存储于HTML网页或者单独的样式单文件中；样式单中包含将该样式应用到指定类型的元素中的规则。此外，CSS伪类主要用于向某些选择器添加特殊的效果，同时CSS伪类是基于页面中各个元素所处的不同特征进行分类。需要说明的是，本实施例主要针对页面滑动过程中判断页面元素是否在视口显示的情况，其中，视口(viewport)是指当前页面中的可视区域，此时CSS伪类主要用于为满足一定特征的页面元素添加一些显示效果，因此本实施例中的分类对象，也就是CSS伪类主要通过判断页面中对应的元素是否在视口显示，从而对页面中的各个元素进行分类。本实施例中的CSS伪类可以根据页面滑动的样式展示需求由用户预先设定。

可选的，由于当前页面中存在多个元素，而分类对象主要用于为某一类元素添加对应显示样式，但并不是每个页面元素在页面滑动过程中都需要更换对应的显示样式，因此在预先设定分类对象，也就是CSS伪类时，还需要为该CSS伪类指定匹配的页面元素，也就是该CSS伪类仅定义页面中某一类特定的页面元素在结构化文档中的显示样式，从而确保仅有该匹配的页面元素能够应用该CSS伪类中设定的样式，其他元素并不参与该CSS伪类中定义的显示样式。

具体的，在当前页面中的页面元素较多时，为了增加用户的使用体验，都会设定当前页面在屏幕显示窗口(视口)中进行滑动，此时该滑动可以是用户手动操作当前页面进行滑动，也可以是在生成当前页面时，预先设定该页面按照某一预设规律在视口滑动；且当前页面的滑动可以包括在视口左右滑动或者上下滑动，对此不作限定。

可选的，本实施例中在检测到当前页面滑动时，为了判断当前页面在滑动过程中需要更换显示样式的页面元素当前是否在视口显示，首先需要确定用户根据当前页面的显示样式需求，预先设定的能够基于页面中各个元素所处的不同特征而进行分类的分类对象，从而根据该预设的分类对象与页面元素之间的匹配关系，确定该分类对象中指定的需要在页面滑动过程中更换显示样式的页面元素，也就是在检测到当前页面滑动时，根据当前页面中预设的分类对象获取匹配的至少一个指定元素，该指定元素为当前页面在滑动时需要更换对应的显示样式的页面元素。具体的，本实施例中预先根据当前页面添加相应滑动效果的需求设定对应的CSS伪类，进而根据该CSS伪类与页面元素之间的匹配关系，确定该CSS伪类中指定的需要添加对应的滑动效果的元素。

S120，获取与指定元素的标识对应的对象监控项的视口监控标识。

其中，对象监控项为在设定分类对象时，预先为各个指定元素添加的一项观察者插件；此时在该指定元素自身的状态发生改变时，该对象监控项主动向本机发出表示对应的指定元素状态变化的通信信息。具体的，本实施例中在设定CSS伪类时，预先为各个指定元素添加对应的CSS监控项。此时本实施例中可以在表示当前页面的页面元素的Element类中，通过新增接口来为页面元素中为CSS伪类匹配的指定元素添加对应的观察者插件，如观察类中的实例对象。具体的，在为各指定元素添加对应的CSS监控项时，还可以为该CSS监控项制定相应的回调函数，通过该回调函数判断对应的指定元素在当前页面滑动过程中对应的显示位置；同时该回调函数中会预先设定表示该指定元素当前是否在视口显示的视口监控标识，该视口监控标识为能够唯一确定对应的指定元素在页面滑动过程中是否在视口显示的标志信息；如若指定元素当前在视口显示，则该视口监控标识为“1”；若指定元素当前未在视口显示，则该视口监控标识为“0”。

此外，由于指定元素为在页面滑动过程中，需要根据分类对象定义的不同元素特征对应更换显示样式的页面元素，此时指定元素在视口显示和未在视口显示时可以匹配有不同的显示样式，因此本实施例中可以将对象监控项，也就是CSS监控项针对指定元素反馈的视口监控标识对应设定为“需要重新计算样式”和“无需重新计算样式”；“需要重新计算样式”表示该指定元素当前在视口显示，“无需重新计算样式”表示该指定元素当前未在视口显示。

具体的，本实施例中在检测到当前页面滑动，并根据预设的分类对象获取到至少一个对应的指定元素时，首先获取各指定元素的标识，并根据每个指定元素的标识查找出预先为各指定元素添加的对应的对象监控项，并在各对象监控项指定的回调函数中获取监控各指定元素时对应生成的视口监控标识。

S130，根据视口监控标识确定指定元素是否在当前页面的视口展示。

其中，视口为移动前端设备中安装的浏览器或其他应用程序在显示页面内容时对应的设备屏幕区域。

具体的，由于展示的当前页面相对于设备的显示窗口(也就是本实施例中的视口)可能较大，需要在视口中滑动该页面而显示页面中的全部信息，因此在当前页面中根据预设的分类对象获取到至少一个指定元素时，首先需要判断各个指定元素是否在当前页面中的视口展示，以便后续根据该指定元素当前是否在视口展示，对应更换该指定元素的显示样式。

具体的，在获取到与各指定元素的标识对应的对象监控项的视口监控标识时，需要对与各指定元素对应的视口监控标识进行分析，由于不同的视口监控标识对应表示该指定元素对应的视口状态，因此本实施例中可以根据获取到的各指定元素对应的视口监控标识，确定各指定元素是否在当前页面中的视口展示。例如，若获取到与某一指定元素对应的CSS监控项的视口监控标识为“需要重新计算样式”，则确定该指定元素此时在当前页面的视口展示，从而根据预设的CSS伪类中定义的显示样式为该指定元素更换匹配的显示样式，实现相应的展示效果。

本公开实施例提供的技术方案，通过在页面中预先配置对应的分类对象，并在检测到页面滑动时，根据该分类对象确定页面中对应的指定元素，获取各指定元素对应的对象监控项的视口监控标识，从而确定指定元素当前是否在视口展示，无需采用JavaScript语言来同时监听每一个指定元素的滚动位置，解决了现有技术中内存占用大、页面滑动卡顿的问题，简化了多个指定元素的位置计算操作，提高了页面元素是否在视口的检测效率。

在上述实施例提供的技术方案的基础上，对于本公开实施例中如何检测指定元素是否在视口展示的具体过程进行进一步描述。在本公开实施例中，由于设定分类对象主要是针对页面滑动过程中需要为指定元素添加相应的滑动效果，该滑动效果仅在指定元素滑至页面视口时才会弹出展示，在滑出页面视口时对应消除该滑动效果；因此本实施例中的指定元素可以包括第一子元素和第二子元素两种。其中，第一子元素为页面滑动过程中指定元素中能够一直显示在当前页面中的子元素；第二子元素为页面滑动过程中为该指定元素设置的滑动效果所对应的子元素，该第二子元素仅在指定元素滑动到页面视口时，才会弹出显示在当前页面中，以展示给用户。

可选的，由于页面滑动过程中指定元素中的第一子元素会一直在页面中显示，因此在检测该指定元素是否在当前页面中的视口展示时，可以通过判断该指定元素中的第一子元素是否在视口展示来确定；此时，本实施例中获取与指定元素的标识对应的对象监控项的视口监控标识，可以具体包括：获取与指定元素中第一子元素的标识对应的对象子监控项的视口子监控标识。

具体的，在当前页面中根据预设的分类对象CSS伪类获取到至少一个指定元素时，首先可以确定出各指定元素中包含的第一子元素和第二子元素；由于在设定分类对象时，也会通过新增接口为各指定元素中的第一子元素添加对应的对象子监控项，在该第一子元素自身的状态发生改变时，该对象子监控项主动向本机发出表示对应的第一子元素状态变化的通信信息。同时，该对象子监控项中还会预先设定表示该第一子元素当前是否在视口展示的视口子监控标识，该视口子监控标识为能够唯一确定对应的第一子元素在页面滑动过程中是否在视口显示的标志信息，与上述实施例中提及的为指定元素设定的对象监控项中的视口监控标识类似。示例性的，在当前页面中根据预设的CSS伪类获取到至少一个指定元素时，首先可以确定出各指定元素中包含的第一子元素和第二子元素；在设定分类对象时，也会通过新增接口为各指定元素中的第一子元素添加对应的CSS子监控项，该CSS子监控项中会预先设定表示该第一子元素当前是否在视口展示的视口子监控标识。

可选的，本实施例中在获取到当前页面中的指定元素时，首先确定出该指定元素中包括的第一子元素和第二子元素，并根据第一子元素的标识查找出预先为该第一子元素添加的对应的对象子监控项，并在该对象子监控项指定的回调函数中获取监控该第一子元素的状态是否变化时对应的生成的视口子监控标识，以便后续判断该第一子元素此时是否在当前页面的视口中展示。

相应的，在对指定元素中的第一子元素对应的视口子监控标识进行判断时，本实施例中根据视口监控标识确定指定元素是否在当前页面的视口展示，可以具体包括：根据视口子监控标识确定第一子元素是否在当前页面的视口展示。

具体的，由于指定元素中的第一子元素在页面滑动过程中一直显示在页面中，因此对判断第一子元素是否在视口展示，便可以确定对应的指定元素是否在视口展示。本实施例中在获取到与各指定元素中的第一子元素的标识对应的对象子监控项的视口子监控标识时，需要对与各第一子元素对应的视口子监控标识进行分析，确定各第一子元素是否在当前页面的视口展示，以便后续确定第一子元素当前在视口展示时，能够根据预设的分类对象中为在视口的元素定义的显示样式为对应的指定元素更换匹配的显示样式，也就是确定该指定元素中第二子元素的显示样式，从而实现相应的展示效果。本实施例中通过检测指定元素中的第一子元素是否在当前页面的视口展示，无需确定第二子元素的视口状态，简化了多个指定元素的位置计算操作，提高了页面元素是否在视口的检测效率。

图2示出了本公开实施例提供的另一种页面元素的检测方法的流程图，本实施例在上述实施例提供的各个可选方案的基础上进行优化。具体的，本公开实施对于上述实施例中的如何获取指定元素，以及在确定指定元素是否在当前页面的视口展示后设定的滑动效果显示的具体过程进行详细的介绍。

可选的，如图2所示，本实施例中的方法可以包括如下步骤：

S210，在预先构建的分类对象库中查找对应的视口对象。

其中，分类对象库中包括在需要对当前页面中处于不同特征下的各个元素进行不同的样式操作时，用户针对元素的各个不同特征而预先设定的多种分类对象，以在后续可以直接根据该分类对象对当前页面中的各个元素进行分类，并对同一特征中的各元素响应匹配的样式操作处理。具体的，本实施例中的分类对象库可以是预设的CSS伪类库，包括针对元素的各个不同特征的多种CSS伪类。如若某一CSS伪类为应用于页面中有焦点的元素，此时可以为页面中有焦点的元素设置特殊的样式；如HTML网页中一个有文本输入焦点的输入框，则会对应匹配一个文本输入光标；而页面中其他没有焦点的元素则不存在对应的文本输入光标。

具体的，本实施例中主要针对页面滑动过程中需要添加对应的滑动效果，以展示给用户的情况中，主要是针对元素在视口展示时的效果显示样式，因此可以根据当前页面中的元素是否在视口来设定匹配的元素样式，此时用户根据样式需求预先在分类对象库中设定对应的视口对象，该视口对象为在视口和未在视口的元素预先设定不同的滑动效果的展示样式；也就是在CSS伪类库中设定对应的视口伪类，通过该视口伪类为在视口和未在视口的元素设定不同的滑动效果。可选的，在页面滑动过程中，针对为用户展示的不同滑动效果，首先在预先构建的分类对象库中查找出用户设定的视口对象，以根据该视口对象中设定的不同视口特征的元素展示样式，在页面滑动过程中为用户展示对应滑动效果。

S220，获取当前页面中与视口对象的标识匹配的至少一个指定元素。

具体的，在预先构建的分类对象库，也就是CSS伪类库中查找到对应的视口对象时，由于当前页面中存在多个元素，但并不是每个元素在页面滑动过程中都需要添加对应的滑动效果，因此在设定视口对象时，会为该视口对象指定当前页面中匹配的元素，使该视口对象仅定义该指定元素在不同视口特征下的显示样式。具体的，以CSS伪类库中设定多种CSS伪类为例，本实施例中在CSS伪类库中查找到视口伪类时，首先确定该视口伪类的标识，该标识可以是视口伪类的名称等在CSS伪类库中能够唯一区分出视口伪类的标志；并根据该视口伪类的标识获取当前页面中指定的能够应用该视口伪类中设定的显示样式的至少一个指定元素，该指定元素中包括第一子元素和第二子元素两种。

S230，获取与指定元素中第一子元素的标识对应的对象子监控项的视口子监控标识。

S240，根据视口子监控标识确定第一子元素是否在当前页面的视口展示，若是，执行S250；若否，执行S260。

S250，在当前页面中弹出第二子元素。

具体的，由于在设定视口对象时会为不同的视口特征分别匹配对应的元素显示样式，视口对象为元素在视口展示时设定匹配的弹出规则，该弹出规则确保元素在视口时弹出为该元素添加的对应的滑动效果，也就是本实施例中的第二子元素；视口伪类为元素未在视口时设定匹配的隐藏规则，该隐藏规则确保元素未在视口时隐藏为该元素添加的对应的滑动效果，也就是本实施例中的第二子元素。

具体的，本实施例中视口对象为对应的视口伪类，此时设定元素在视口展示时匹配的弹出规则为具体的CSS弹出规则；设定元素未在视口时匹配的隐藏规则为具体的CSS隐藏规则。可选的，在根据视口子监控标识确定指定元素中的第一子元素在当前页面的视口展示时，可以确定该第一子元素此时满足预设的CSS伪类中所基于页面中各个元素所处的不同特征进行分类的特征依据，从而触发CSS伪类中预设的元素在视口时对应的CSS弹出规则，并响应该CSS弹出规则，在当前页面中弹出与该第一子元素对应的第二子元素，使第二子元素能够在此时显示在当前页面的视口中，并展示给用户。具体的，由于第二子元素为页面滑动过程中为对应的指定元素设置的滑动效果所对应的子元素，因此在第一子元素在视口展示，也就是对应的指定元素在视口展示时，在当前页面中弹出与该第一子元素对应的第二子元素，也就是在视口中弹出为该指定元素在页面滑动过程中添加的滑动效果，从而将该滑动效果展示给用户。

S260，在当前页面中隐藏第二子元素。

具体的，当确定指定元素中的第一子元素未在视口展示时，可以获取该视口对象为未在视口的元素预设的隐藏规则，并响应于该隐藏规则，也就是获取视口伪类为未在视口的元素预设的CSS隐藏规则，并响应于该CSS隐藏规则，在当前页面中将与该指定元素中的第一子元素对应的第二子元素移动一定位置，使该第二子元素与对应的第一子元素在当前页面中的位置重叠，并将第二子元素的样式设为隐藏在第一子元素的下一层中；从而在页面滑动过程中，可以在当前页面中仅展示当前在视口的指定元素所添加的滑动效果，也就是与在视口的第一子元素对应的第二子元素；在该指定元素滑出视口时，直接将该添加的滑动效果隐藏，并展示此时滑动到视口的另一指定元素对应添加的滑动效果，简化了为各指定元素添加滑动效果的软件操作，提高了页面中滑动效果展示的流畅性。

本公开实施例提供的技术方案，通过在页面中预先配置对应的分类对象，并根据该分类对象确定页面中对应的指定元素，当指定元素中的第一子元素在视口展示时，弹出对应的第二子元素，从而实现页面滑动中各第二子元素在视口的相应展示，无需采用JavaScript语言来同时监听各个指定元素，解决了现有技术中内存占用大、页面滑动卡顿的问题，简化了为各指定元素添加滑动效果的软件操作，提高了页面中滑动效果展示的流畅性。

图3示出了本公开实施例提供的页面滑动展示的界面示意图。本实施例主要通过在具体场景下的页面滑动，对本实施例中的页面元素的检测方法进行进一步的说明。具体的，本实施例以世界杯比赛中各项比赛对应的具体比赛结果和添加的明星头像效果为例，其中，比赛结果为第一子元素，在页面滑动过程中能够一直显示；明星头像为第二子元素，在页面滑动过程中仅在当前页面的视口显示；此时各项比赛中的比赛结果和明星头像共同组成对应的指定元素，每一项比赛均对应一个指定元素。由于在页面滑动过程中仅为世界杯比赛添加对应的滑动效果，因此在预先设定对应CSS伪类中的视口伪类时，需要将该视口伪类的标识与各项比赛对应的指定元素建立对应的匹配关系。

可选的，在页面滑动过程中，首先根据预设的视口伪类的标识获取当前页面中各项比赛对应的指定元素，并确定各个指定元素中包括的比赛结果和明星头像，如图3中的比赛结果A和对应的明星头像A，以及比赛结果B和明星头像B。此时根据各个指定元素中的比赛结果A和比赛结果B的标识确定预先为比赛结果A和比赛结果B分别添加的CSS子监控项，并获取对应的CSS子监控项对比赛结果A和比赛结果B的视口状态进行监控时对应生成的视口子监控标识，并根据对应的视口子监控标识分别对比赛结果A和比赛结果B是否在当前页面的视口展示进行判断，从而确定比赛结果A和比赛结果B在页面滑动过程中是否在视口展示的监控结果。

进一步的，如图3中所示，刚开始比赛结果A在视口展示，比赛结果B未在视口展示，此时各项比赛分别响应视口伪类中预先设定的元素在视口时的CSS弹出规则，以及元素未在视口时的CSS隐藏规则，从而在当前页面中弹出比赛结果A对应的明星头像A，从而将明星头像A展示在视口中；并在当前页面中隐藏比赛结果B对应的明星头像B，使视口中仅显示明星头像A，从而为用户展示对应的滑动效果。

可选的，在页面滑动后，比赛结果A滑出视口而未在视口展示，比赛结果B滑入视口而展示在视口，此时各项比赛再次分别响应视口伪类中预先设定的元素在视口时的CSS弹出规则，以及元素未在视口时的CSS隐藏规则，在当前页面中隐藏比赛结果A对应的明星头像A，并在当前页面中弹出比赛结果B对应的明星头像B，从而将明星头像B展示在视口中，此时能够实现页面滑动过程中为用户展示对应的滑动效果。

需要说明的是，页面左右滑动仅是本实施例提供的一种页面滑动示例，页面也可以在界面中上下滑动，本实施例对此不作限定；同时本实施例在比赛结果的上弹出对应的明星头像，显示对应的滑动效果，也可以在下方弹出对应的明星头像，本实施例对于滑动效果的具体显示位置不作限定，可以由用户根据界面美观性等各方面的需求自行设定。

本公开实施例提供的技术方案，通过在页面中预先配置对应的CSS伪类，并根据该CSS伪类确定页面中对应的指定元素，当指定元素中的第一子元素在视口展示时，弹出对应的第二子元素，从而实现页面滑动中各第二子元素在视口的相应展示，无需采用JavaScript语言来同时监听各个指定元素，解决了现有技术中内存占用大、页面滑动卡顿的问题，简化了为各指定元素添加滑动效果的软件操作，提高了页面中滑动效果展示的流畅性。

图4示出了本公开实施例提供的一种页面元素的检测装置的结构示意图，本公开实施例可适用于在页面滑动过程中检测页面元素是否在视口展示的情况中，该装置可以通过软件和/或硬件来实现，并集成在执行本方法的设备中。如图4所示，本公开实施例中的页面元素的检测装置，可以包括：

元素获取模块410，用于检测到当前页面滑动，则根据当前页面中预设的分类对象获取至少一个指定元素；

监控标识获取模块420，用于获取与指定元素的标识对应的对象监控项的视口监控标识；

元素检测模块430，用于根据视口监控标识确定指定元素是否在当前页面的视口展示。

本公开实施例提供的技术方案，通过在页面中预先配置对应的分类对象，并在检测到页面滑动时，根据该分类对象确定页面中对应的指定元素，获取各指定元素对应的对象监控项的视口监控标识，从而确定指定元素当前是否在视口展示，无需采用JavaScript语言来同时监听每一个指定元素的滚动位置，解决了现有技术中内存占用大、页面滑动卡顿的问题，简化了多个指定元素的位置计算操作，提高了页面元素是否在视口的检测效率。

进一步的，上述指定元素可以包括第一子元素和第二子元素。

进一步的，上述监控标识获取模块420，可以具体用于：

获取与指定元素中第一子元素的标识对应的对象子监控项的视口子监控标识；

上述元素检测模块430，可以具体用于：

根据视口子监控标识确定第一子元素是否在当前页面的视口展示。

进一步的，上述页面元素的检测装置，还可以包括：

弹出模块，用于在根据视口子监控标识确定第一子元素是否在当前页面的视口展示之后，若第一子元素在视口展示，则在当前页面中弹出第二子元素；

隐藏模块，用于在根据视口子监控标识确定第一子元素是否在当前页面的视口展示之后，若第一子元素未在视口展示，则在当前页面中隐藏第二子元素。

进一步的，上述元素获取模块410，可以包括：

视口对象查找单元，用于在预先构建的分类对象库中查找对应的视口对象；

元素获取单元，用于获取当前页面中与视口对象的标识匹配的至少一个指定元素。

本公开实施例提供的页面元素的检测装置，与上述实施例提供的页面元素的检测方法属于同一发明构思，未在本公开实施例中详尽描述的技术细节可参见上述实施例，并且本公开实施例与上述实施例具有相同的有益效果。

下面参考图5，其示出了适于用来实现本公开实施例的设备500的结构示意图。本公开实施例中的设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图5示出的设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图5所示，设备500可以包括处理装置(例如中央处理器、图形处理器等)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储装置508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有设备500操作所需的各种程序和数据。处理装置501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

通常，以下装置可以连接至I/O接口505：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置506；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置507；包括例如磁带、硬盘等的存储装置508；以及通信装置509。通信装置509可以允许设备500与其他设备进行无线或有线通信以交换数据。虽然图5示出了具有各种装置的设备500，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置509从网络上被下载和安装，或者从存储装置508被安装，或者从ROM 502被安装。在该计算机程序被处理装置501执行时，执行本公开实施例的方法中限定的上述功能。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述设备中所包含的；也可以是单独存在，而未装配入该设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该设备执行时，使得该设备：检测到当前页面滑动，则根据当前页面中预设的分类对象获取至少一个指定元素；获取与指定元素的标识对应的对象监控项的视口监控标识；根据视口监控标识确定指定元素是否在当前页面的视口展示。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定。

以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

1.一种页面元素的检测方法，其特征在于，包括：

检测到当前页面滑动，则根据当前页面中预设的分类对象获取至少一个指定元素；

获取与所述指定元素的标识对应的对象监控项的视口监控标识；

根据所述视口监控标识确定所述指定元素是否在当前页面的视口展示。

2.根据权利要求1所述的方法，其特征在于，所述指定元素包括第一子元素和第二子元素。

3.根据权利要求2所述的方法，其特征在于，获取与所述指定元素的标识对应的对象监控项的视口监控标识，包括：

获取与所述指定元素中第一子元素的标识对应的对象子监控项的视口子监控标识；

根据所述视口监控标识确定所述指定元素是否在当前页面的视口展示，包括：

根据所述视口子监控标识确定所述第一子元素是否在当前页面的视口展示。

4.根据权利要求3所述的方法，其特征在于，在根据所述视口子监控标识确定所述第一子元素是否在当前页面的视口展示之后，还包括：

若第一子元素在视口展示，则在当前页面中弹出所述第二子元素；

若第一子元素未在视口展示，则在当前页面中隐藏所述第二子元素。

5.根据权利要求1所述的方法，其特征在于，根据当前页面中预设的分类对象获取至少一个指定元素，包括：

在预先构建的分类对象库中查找对应的视口对象；

获取当前页面中与所述视口对象的标识匹配的至少一个指定元素。

6.一种页面元素的检测装置，其特征在于，包括：

元素获取模块，用于检测到当前页面滑动，则根据当前页面中预设的分类对象获取至少一个指定元素；

监控标识获取模块，用于获取与所述指定元素的标识对应的对象监控项的视口监控标识；

元素检测模块，用于根据所述视口监控标识确定所述指定元素是否在当前页面的视口展示。

7.根据权利要求6所述的装置，其特征在于，所述指定元素包括第一子元素和第二子元素。

8.根据权利要求7所述的装置，其特征在于，所述监控标识获取模块，具体用于：

获取与所述指定元素中第一子元素的标识对应的对象子监控项的视口子监控标识；

所述元素检测模块，具体用于：

根据所述视口子监控标识确定所述第一子元素是否在当前页面的视口展示。

9.一种设备，其特征在于，所述设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的页面元素的检测方法。

10.一种可读介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-5中任一所述的页面元素的检测方法。

Images