CN109582188B - 一种实现弹窗内元素定位的方法、装置及相关设备 - Google Patents
一种实现弹窗内元素定位的方法、装置及相关设备 Download PDFInfo
- Publication number
- CN109582188B CN109582188B CN201710912116.6A CN201710912116A CN109582188B CN 109582188 B CN109582188 B CN 109582188B CN 201710912116 A CN201710912116 A CN 201710912116A CN 109582188 B CN109582188 B CN 109582188B
- Authority
- CN
- China
- Prior art keywords
- positioning
- value
- window
- positioning element
- rolling
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
- G06F3/04855—Interaction with scrollbars
Abstract
本申请公开了一种实现弹窗内元素定位的方法，用于实现弹窗内对元素的定位，该方法包括：获取弹窗的包裹元素，并确定包裹元素内的定位元素；获取定位元素的定位值，定位值包括定位元素距离弹窗内壁的距离；根据定位元素的定位值计算定位元素滚动值；将定位元素滚动值赋值给包裹元素中的弹窗滚动条滚动距离属性，以使在弹窗弹出时将定位元素滚动到预设位置。本申请还公开了一种实现弹窗内元素定位的装置、设备以及存储介质。
Description
技术领域
本申请涉及互联网技术领域，具体涉及一种实现弹窗内元素定位的方法、装置及相关设备。
背景技术
在网页被触发显示时，可以将页面内的某个元素定位到预设位置显示，该定位过程可以通过锚点定位的方式实现。但是，在以angularJS框架构建的网页中，锚点一般均被设置为路由跳转，无法实现定位到某个元素的功能。在angularJS框架中可以使用特有的$anchorScroll定位服务实现在当前页面上定位到某个指定元素，但是，无法实现在弹出的窗口中定位到某个元素所在的位置。
发明内容
有鉴于此，本申请提供一种实现弹窗内元素定位的方法、装置及相关设备，以解决现有技术中使用angularJS框架无法实现在弹窗中定位到某个元素的技术问题。
为解决上述问题，本申请提供的技术方案如下：
一种实现弹窗内元素定位的方法，所述方法包括：
获取弹窗的包裹元素，并确定所述包裹元素内的定位元素；
获取所述定位元素的定位值，所述定位值包括所述定位元素距离所述弹窗内壁的距离；
根据所述定位元素的定位值计算定位元素滚动值；
将所述定位元素滚动值赋值给所述包裹元素中的弹窗滚动条滚动距离属性，以使在所述弹窗弹出时将所述定位元素滚动到预设位置。
可选的，所述获取所述定位元素的定位值，包括：
获取所述定位元素的第一定位值和/或第二定位值，所述第一定位值包括所述定位元素上边缘距离所述弹窗内壁上边缘的距离，所述第二定位值包括所述定位元素左边缘距离所述弹窗内壁左边缘的距离。
可选的，所述根据所述定位元素的定位值计算定位元素滚动值，包括：
当获取到所述定位元素的第一定位值，将所述第一定位值减去第一预设值获得第一定位元素滚动值；
当获取到所述定位元素的第二定位值，将所述第二定位值减去第二预设值获得第二定位元素滚动值。
可选的，所述将所述定位元素滚动值赋值给所述包裹元素中的弹窗滚动条滚动距离属性，包括：
当获得第一定位元素滚动值，将所述第一定位元素滚动赋值给所述包裹元素中的弹窗纵向滚动条滚动距离属性；
当获得第二定位元素滚动值，将所述第二定位元素滚动赋值给所述包裹元素中的弹窗横向滚动条滚动距离属性。
一种实现弹窗内元素定位的装置，所述装置包括：
第一获取单元，用于获取弹窗的包裹元素，并确定所述包裹元素内的定位元素；
第二获取单元，用于获取所述定位元素的定位值，所述定位值包括所述定位元素距离所述弹窗内壁的距离；
计算单元，用于根据所述定位元素的定位值计算定位元素滚动值；
赋值单元，用于将所述定位元素滚动值赋值给所述包裹元素中的弹窗滚动条滚动距离属性，以使在所述弹窗弹出时将所述定位元素滚动到预设位置。
可选的，所述第二获取单元具体用于：
获取所述定位元素的第一定位值和/或第二定位值，所述第一定位值包括所述定位元素上边缘距离所述弹窗内壁上边缘的距离，所述第二定位值包括所述定位元素左边缘距离所述弹窗内壁左边缘的距离。
可选的，所述计算单元具体用于：
当获取到所述定位元素的第一定位值，将所述第一定位值减去第一预设值获得第一定位元素滚动值；
当获取到所述定位元素的第二定位值，将所述第二定位值减去第二预设值获得第二定位元素滚动值。
可选的，所述赋值单元具体用于：
当获得第一定位元素滚动值，将所述第一定位元素滚动赋值给所述包裹元素中的弹窗纵向滚动条滚动距离属性；
当获得第二定位元素滚动值，将所述第二定位元素滚动赋值给所述包裹元素中的弹窗横向滚动条滚动距离属性。
一种实现弹窗内元素定位的设备，所述设备包括：
处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序，所述处理器执行所述程序时实现上述的实现弹窗内元素定位的方法。
一种计算机可读存储介质，存储有程序，当所述程序在终端上运行时，使得所述终端执行如上述的实现弹窗内元素定位的方法。
由此可见，本申请实施例具有如下有益效果：
本申请实施例可以通过获取弹窗的包裹元素，确定包裹元素中需要定位的定位元素，获取定位元素的定位值并计算定位元素滚动值，通过将定位元素滚动值赋值给包裹元素中的弹窗滚动条滚动距离属性，从而实现在弹窗弹出时将定位元素滚动到预设位置，完成弹窗中定位元素的定位。
附图说明
图1为本申请实施例的应用场景示意图；
图2为本申请实施例中实现弹窗内元素定位的方法实施例一的流程图；
图3为本申请实施例中实现弹窗内元素定位的方法实施例二的流程图；
图4为本申请实施例中实现弹窗内元素定位的方法实施例二的示意图；
图5为本申请实施例中实现弹窗内元素定位的方法实施例三的流程图；
图6为本申请实施例中实现弹窗内元素定位的方法实施例三的示意图；
图7为本申请实施例中实现弹窗内元素定位的方法实施例四的流程图；
图8为本申请实施例中实现弹窗内元素定位的方法实施例四的示意图；
图9为本申请实施例中实现弹窗内元素定位的装置实施例的示意图。
具体实施方式
为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请实施例作进一步详细的说明。
首先对本申请实施例的应用场景进行说明。参见图1所示，在实际应用中，用户在网页11中可以通过点击某个关键信息链接打开一个弹窗12，在弹窗中详细展示与该关键信息相关的内容。在弹窗打开时，会有将弹窗中某个元素定位显示到弹窗预设位置的需求，例如将某个元素显示到弹窗中便于用户阅读的中上部，该元素即为本申请实施例中的定位元素13。但是，在现有技术中，通过AngularJS架构制作的弹窗中无法实现定位元素在弹窗中的定位。为此本申请实施例提供一种实现弹窗内元素定位的方法、装置及相关设备，以实现在AngularJS架构下，在弹窗弹出时可以将定位元素滚动到预设位置，完成弹窗中定位元素的定位。
参见图2所示，示出了本申请实施例中提供的实现弹窗内元素定位的方法实施例一的流程图，可以包括以下步骤：
步骤201：获取弹窗的包裹元素，并确定包裹元素内的定位元素。
弹窗的包裹元素即为将整个弹窗的实现代码包含在内的一个容器元素。弹窗的包裹元素可以定义弹窗的实现方式，例如包裹元素中的定位属性可以定义弹窗在弹出时相对于网页浏览器窗口的位置，又例如包裹元素可以包括弹窗内所显示的元素。在实际应用中，包裹元素中的定位(position)属性可以包括定位方式以及定位的位置值，定位方式可以为relative(相对定位)、absolute(绝对定位)、fixed(相对浏览器窗口绝对定位)等。
定位元素是某个在弹窗内所显示的元素，在本实施例中，可以在弹窗弹出时将该定位元素显示到弹窗中的预设位置，实现定位元素的定位过程。定位元素属于弹窗内所显示的元素，因此定位元素包含在弹窗的包裹元素内部。定位元素具有定位元素的标识，可以通过查找定位元素的标识确定包裹元素内的该需要进行定位的定位元素。
步骤202：获取定位元素的定位值，定位值包括定位元素距离弹窗内壁的距离。
由于弹窗的包裹元素包含了定位元素，因此弹窗的包裹元素可以是定位元素的父元素。在父元素的定位方式为relative、absolute或者fixed时，定位元素的定位值可以为定位元素距离父元素内壁的距离，即定位元素的可以包括定位元素距离弹窗内壁的距离。
获取定位元素的定位值的方式有多种，例如获取定位元素的DOM(DocumentObject Model，文档对象模型)形式，如定位元素的标识为law135，则通过获取该定位元素的DOM形式document.getElementById(“#law1387”).offsetTop获取定位元素的定位值。
定位元素的定位值可以包括第一定位值(offsetTop)以及第一定位值(offsetLeft)，第一定位值定义了定位元素上边缘距离父元素内壁上边缘的距离，即第一定位值可以包括定位元素上边缘距离弹窗内壁上边缘的距离；第二定位值定义了定位元素左边缘距离父元素内壁左边缘的距离，即第二定位值可以包括定位元素左边缘距离弹窗内壁左边缘的距离。例如，在上例中获取的offsetTop值即为定位元素的第一定位值。
步骤203：根据定位元素的定位值计算定位元素滚动值。
在本实施例中，可以预先设定定位元素所需要的显示位置，定位元素所需要的显示位置为移动后的定位元素边缘距离弹窗内壁的预设距离，则根据定位元素当前的定位值以及定位元素所需要的显示位置可以计算得到定位元素滚动值，定位元素滚动值即为在弹窗弹出时定位元素所需要移动的距离。
定位元素的定位值可以整数，并以像素为单位，定位元素滚动值也可以为整数，并以像素为单位。
步骤204：将定位元素滚动值赋值给包裹元素中的弹窗滚动条滚动距离属性，以使在弹窗弹出时将定位元素滚动到预设位置。
包裹元素中的弹窗滚动条滚动距离属性可以定义弹窗的滚动条滚动距离，滚动条滚动距离与定位元素滚动值是一致的，例如弹窗滚动条向下滚动100像素，则定位元素向上滚动100像素。通过将定位元素滚动值赋值给包裹元素中的弹窗滚动条滚动距离属性，可以实现在弹窗弹出时将定位元素滚动到预设位置。
弹窗滚动条滚动距离属性可以包括弹窗纵向滚动条滚动距离属性(scrollTop)以及弹窗横向滚动条滚动距离属性(scrollLeft)，分别定义了弹窗纵向滚动条的滚动距离以及弹窗横向滚动条的滚动距离。在后续实施例中，将结合实例对定义元素沿纵向移动进行定位、定义元素沿横向移动进行定位以及定义元素沿纵向以及横向移动进行定位分别进行说明。
参见图3所示，示出了本申请实施例中提供的实现弹窗内元素定位的方法实施例二的流程图，本实施例将结合实例对定义元素沿纵向移动进行定位的方案进行说明，本实施例可以包括以下步骤：
步骤301：获取弹窗的包裹元素，并确定包裹元素内的定位元素。
对本步骤的说明可以参见步骤201，在此不再赘述。
步骤302：获取定位元素的第一定位值，第一定位值包括定位元素上边缘距离弹窗内壁上边缘的距离。
步骤303：将第一定位值减去第一预设值获得第一定位元素滚动值。
参见图4所示，定位元素42的上边缘与弹窗内壁上边缘的距离为第一定位值offsetTop。定位元素所需要的显示位置41可以用移动后的定位元素上边缘距离弹窗内壁上边缘的距离来标识，该距离为A。
一般在弹窗初始状态下，弹窗中第一行的元素位于弹窗顶部，则定位元素需要向上移动，则第一预设值为A，需要将offsetTop减去A获得第一定位元素滚动值。例如offsetTop为100，A为10，则第一定位元素滚动值为90，需要将定位元素向上滚动90像素。
步骤304：将第一定位元素滚动赋值给包裹元素中的弹窗纵向滚动条滚动距离属性，以使在弹窗弹出时将定位元素滚动到预设位置。
弹窗纵向滚动条滚动距离属性定义了弹窗中纵向滚动条43的滚动距离，将第一定位元素滚动赋值scrollTop，可以确定弹窗中纵向滚动条的滚动距离。例如scrollTop为90，需要将定位元素向上滚动90像素，则纵向滚动条向下滚动90像素。
在本实施例中，可以实现弹窗中的定位元素在纵向的定位。
参见图5所示，示出了本申请实施例中提供的实现弹窗内元素定位的方法实施例三的流程图，本实施例将结合实例对定义元素沿横向移动进行定位的方案进行说明，本实施例可以包括以下步骤：
步骤501：获取弹窗的包裹元素，并确定包裹元素内的定位元素。
对本步骤的说明可以参见步骤201，在此不再赘述。
步骤502：获取定位元素的第二定位值，第二定位值包括定位元素左边缘距离弹窗内壁左边缘的距离。
步骤503：将第二定位值减去第二预设值获得第二定位元素滚动值。
参见图6所示，定位元素62的左边缘与弹窗内壁左边缘的距离为第二定位值offsetLeft。定位元素所需要的显示位置62可以用移动后的定位元素左边缘距离弹窗内壁左边缘的距离来标识，该距离为B。
当定位元素需要向左移动，第二预设值为B，需要将offsetLeft减去B获得第二定位元素滚动值。例如offsetLeft为50，B为10，则第二定位元素滚动值为40，需要将定位元素向左滚动40像素。
步骤504：将第二定位元素滚动赋值给包裹元素中的弹窗横向滚动条滚动距离属性，以使在弹窗弹出时将定位元素滚动到预设位置。
弹窗横向滚动条滚动距离属性定义了弹窗中横向滚动条63的滚动距离，将第二定位元素滚动赋值scrollLeft，可以确定弹窗中横向滚动条的滚动距离。例如scrollLeft为40，需要将定位元素向左滚动40像素，则横向滚动条向右滚动40像素。
在本实施例中，可以实现弹窗中的定位元素在横向的定位。
参见图7所示，示出了本申请实施例中提供的实现弹窗内元素定位的方法实施例四的流程图，本实施例将结合实例对定义元素沿纵向以及横向移动进行定位的情况进行说明，本实施例可以包括以下步骤：
步骤701：获取弹窗的包裹元素，并确定包裹元素内的定位元素。
对本步骤的说明可以参见步骤201，在此不再赘述。
步骤702：获取定位元素的第一定位值以及定位元素的第二定位值，第一定位值包括定位元素上边缘距离弹窗内壁上边缘的距离，第二定位值包括定位元素左边缘距离弹窗内壁左边缘的距离。
步骤703：将第一定位值减去第一预设值获得第一定位元素滚动值，将第二定位值减去第二预设值获得第二定位元素滚动值。
步骤704：将第一定位元素滚动赋值给包裹元素中的弹窗纵向滚动条滚动距离属性，将第二定位元素滚动赋值给包裹元素中的弹窗横向滚动条滚动距离属性，以使在弹窗弹出时将定位元素滚动到预设位置。
参见图8所示，在本实施例可以计算出弹窗纵向滚动条82以及弹窗横向滚动条83分的滚动距离，实现定位元素81在横向以及纵向上的定位。定位元素在横向以及纵向移动的过程与上述实施例类似，具体过程可以参见上述方法实施例二和方法实施例三，在此不再赘述。
这样，本申请实施例可以通过获取弹窗的包裹元素，确定包裹元素中需要定位的定位元素，获取定位元素的定位值并计算定位元素滚动值，通过将定位元素滚动值赋值给包裹元素中的弹窗滚动条滚动距离属性，从而实现在弹窗弹出时将定位元素滚动到预设位置，完成弹窗中定位元素的定位。
参见图9所示，本申请实施例还提供一种实现弹窗内元素定位的装置实施例，可以包括：
第一获取单元901，用于获取弹窗的包裹元素，并确定包裹元素内的定位元素。
第二获取单元902，用于获取定位元素的定位值，定位值包括定位元素距离弹窗内壁的距离。
计算单元903，用于根据定位元素的定位值计算定位元素滚动值。
赋值单元904，用于将定位元素滚动值赋值给包裹元素中的弹窗滚动条滚动距离属性，以使在弹窗弹出时将定位元素滚动到预设位置。
在本申请一些可能的实现方式中，第二获取单元可以具体用于：
获取定位元素的第一定位值和/或第二定位值，第一定位值包括定位元素上边缘距离弹窗内壁上边缘的距离，第二定位值包括定位元素左边缘距离弹窗内壁左边缘的距离。
在本申请一些可能的实现方式中，计算单元可以具体用于：
当获取到定位元素的第一定位值，将第一定位值减去第一预设值获得第一定位元素滚动值；
当获取到定位元素的第二定位值，将第二定位值减去第二预设值获得第二定位元素滚动值。
在本申请一些可能的实现方式中，赋值单元可以具体用于：
当获得第一定位元素滚动值，将第一定位元素滚动赋值给包裹元素中的弹窗纵向滚动条滚动距离属性；
当获得第二定位元素滚动值，将第二定位元素滚动赋值给包裹元素中的弹窗横向滚动条滚动距离属性。
所述实现弹窗内元素定位的装置可以包括处理器和存储器，上述第一获取单元、第二获取单元、计算单元和赋值单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来实现弹窗内元素的定位。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。
本发明实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述实现弹窗内元素定位的方法。
本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述实现弹窗内元素定位的方法。
本发明实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：
获取弹窗的包裹元素，并确定所述包裹元素内的定位元素；
获取所述定位元素的定位值，所述定位值包括所述定位元素距离所述弹窗内壁的距离；
根据所述定位元素的定位值计算定位元素滚动值；
将所述定位元素滚动值赋值给所述包裹元素中的弹窗滚动条滚动距离属性，以使在所述弹窗弹出时将所述定位元素滚动到预设位置。
可选的，所述获取所述定位元素的定位值可以包括：
获取所述定位元素的第一定位值和/或第二定位值，所述第一定位值包括所述定位元素上边缘距离所述弹窗内壁上边缘的距离，所述第二定位值包括所述定位元素左边缘距离所述弹窗内壁左边缘的距离。
可选的，根据所述定位元素的定位值计算定位元素滚动值可以包括：
当获取到所述定位元素的第一定位值，将所述第一定位值减去第一预设值获得第一定位元素滚动值；
当获取到所述定位元素的第二定位值，将所述第二定位值减去第二预设值获得第二定位元素滚动值。
可选的，所述将所述定位元素滚动值赋值给所述包裹元素中的弹窗滚动条滚动距离属性可以包括：
当获得第一定位元素滚动值，将所述第一定位元素滚动赋值给所述包裹元素中的弹窗纵向滚动条滚动距离属性；
当获得第二定位元素滚动值，将所述第二定位元素滚动赋值给所述包裹元素中的弹窗横向滚动条滚动距离属性。
本文中的设备可以是服务器、PC、PAD、手机等。
本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：
获取弹窗的包裹元素，并确定所述包裹元素内的定位元素；
获取所述定位元素的定位值，所述定位值包括所述定位元素距离所述弹窗内壁的距离；
根据所述定位元素的定位值计算定位元素滚动值；
将所述定位元素滚动值赋值给所述包裹元素中的弹窗滚动条滚动距离属性，以使在所述弹窗弹出时将所述定位元素滚动到预设位置。
可选的，所述获取所述定位元素的定位值可以包括：
获取所述定位元素的第一定位值和/或第二定位值，所述第一定位值包括所述定位元素上边缘距离所述弹窗内壁上边缘的距离，所述第二定位值包括所述定位元素左边缘距离所述弹窗内壁左边缘的距离。
可选的，根据所述定位元素的定位值计算定位元素滚动值可以包括：
当获取到所述定位元素的第一定位值，将所述第一定位值减去第一预设值获得第一定位元素滚动值；
当获取到所述定位元素的第二定位值，将所述第二定位值减去第二预设值获得第二定位元素滚动值。
可选的，所述将所述定位元素滚动值赋值给所述包裹元素中的弹窗滚动条滚动距离属性可以包括：
当获得第一定位元素滚动值，将所述第一定位元素滚动赋值给所述包裹元素中的弹窗纵向滚动条滚动距离属性；
当获得第二定位元素滚动值，将所述第二定位元素滚动赋值给所述包裹元素中的弹窗横向滚动条滚动距离属性。
这样，本申请实施例可以通过获取弹窗的包裹元素，确定包裹元素中需要定位的定位元素，获取定位元素的定位值并计算定位元素滚动值，通过将定位元素滚动值赋值给包裹元素中的弹窗滚动条滚动距离属性，从而实现在弹窗弹出时将定位元素滚动到预设位置，完成弹窗中定位元素的定位。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。
Claims (10)
1.一种实现弹窗内元素定位的方法，其特征在于，所述方法包括：
获取弹窗的包裹元素，并确定所述包裹元素内的定位元素；
获取所述定位元素的定位值，所述定位值包括所述定位元素距离所述弹窗内壁的距离；
根据所述定位元素的定位值计算定位元素滚动值；
将所述定位元素滚动值赋值给所述包裹元素中的弹窗滚动条滚动距离属性，以使在所述弹窗弹出时将所述定位元素滚动到预设位置。
2.根据权利要求1所述的方法，其特征在于，所述获取所述定位元素的定位值，包括：
获取所述定位元素的第一定位值和/或第二定位值，所述第一定位值包括所述定位元素上边缘距离所述弹窗内壁上边缘的距离，所述第二定位值包括所述定位元素左边缘距离所述弹窗内壁左边缘的距离。
3.根据权利要求2所述的方法，其特征在于，所述根据所述定位元素的定位值计算定位元素滚动值，包括：
当获取到所述定位元素的第一定位值，将所述第一定位值减去第一预设值获得第一定位元素滚动值；
当获取到所述定位元素的第二定位值，将所述第二定位值减去第二预设值获得第二定位元素滚动值。
4.根据权利要求3所述的方法，其特征在于，所述将所述定位元素滚动值赋值给所述包裹元素中的弹窗滚动条滚动距离属性，包括：
当获得第一定位元素滚动值，将所述第一定位元素滚动值赋值给所述包裹元素中的弹窗纵向滚动条滚动距离属性；
当获得第二定位元素滚动值，将所述第二定位元素滚动值赋值给所述包裹元素中的弹窗横向滚动条滚动距离属性。
5.一种实现弹窗内元素定位的装置，其特征在于，所述装置包括：
第一获取单元，用于获取弹窗的包裹元素，并确定所述包裹元素内的定位元素；
第二获取单元，用于获取所述定位元素的定位值，所述定位值包括所述定位元素距离所述弹窗内壁的距离；
计算单元，用于根据所述定位元素的定位值计算定位元素滚动值；
赋值单元，用于将所述定位元素滚动值赋值给所述包裹元素中的弹窗滚动条滚动距离属性，以使在所述弹窗弹出时将所述定位元素滚动到预设位置。
6.根据权利要求5所述的装置，其特征在于，所述第二获取单元具体用于：
获取所述定位元素的第一定位值和/或第二定位值，所述第一定位值包括所述定位元素上边缘距离所述弹窗内壁上边缘的距离，所述第二定位值包括所述定位元素左边缘距离所述弹窗内壁左边缘的距离。
7.根据权利要求6所述的装置，其特征在于，所述计算单元具体用于：
当获取到所述定位元素的第一定位值，将所述第一定位值减去第一预设值获得第一定位元素滚动值；
当获取到所述定位元素的第二定位值，将所述第二定位值减去第二预设值获得第二定位元素滚动值。
8.根据权利要求7所述的装置，其特征在于，所述赋值单元具体用于：
当获得第一定位元素滚动值，将所述第一定位元素滚动值赋值给所述包裹元素中的弹窗纵向滚动条滚动距离属性；
当获得第二定位元素滚动值，将所述第二定位元素滚动值赋值给所述包裹元素中的弹窗横向滚动条滚动距离属性。
9.一种实现弹窗内元素定位的设备，其特征在于，所述设备包括：
处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序，所述处理器执行所述程序时实现权利要求1-4任一项所述的实现弹窗内元素定位的方法。
10.一种计算机可读存储介质，其特征在于，存储有程序，当所述程序在终端上运行时，使得所述终端执行如权利要求1-4任一项所述的实现弹窗内元素定位的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710912116.6A CN109582188B (zh) | 2017-09-29 | 2017-09-29 | 一种实现弹窗内元素定位的方法、装置及相关设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710912116.6A CN109582188B (zh) | 2017-09-29 | 2017-09-29 | 一种实现弹窗内元素定位的方法、装置及相关设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109582188A CN109582188A (zh) | 2019-04-05 |
| CN109582188B true CN109582188B (zh) | 2020-09-22 |
Family
ID=65919199
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710912116.6A Active CN109582188B (zh) | 2017-09-29 | 2017-09-29 | 一种实现弹窗内元素定位的方法、装置及相关设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109582188B (zh) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112394868A (zh) * | 2019-08-13 | 2021-02-23 | 北京国双科技有限公司 | 网页弹框中目标信息的定位方法及装置 |
| CN113779459B (zh) * | 2021-08-09 | 2024-01-02 | 北京达佳互联信息技术有限公司 | 页面显示方法、装置及电子设备 |
| CN114327207A (zh) * | 2021-11-22 | 2022-04-12 | 北京云测信息技术有限公司 | 元素定位方法、装置、电子设备及存储介质 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102243642A (zh) * | 2010-05-14 | 2011-11-16 | 索尼公司 | 信息处理设备和方法、以及程序 |
| CN102778997A (zh) * | 2011-12-15 | 2012-11-14 | 联想(北京)有限公司 | 一种窗口显示方法及装置 |
| CN102831148A (zh) * | 2012-06-19 | 2012-12-19 | 北京奇虎科技有限公司 | 一种基于浏览器的推荐数据加载方法和装置 |
| CN103530026A (zh) * | 2013-10-31 | 2014-01-22 | 北京国双科技有限公司 | 网页弹出框定位方法和装置 |
| CN103558961A (zh) * | 2013-11-07 | 2014-02-05 | 北京国双科技有限公司 | 弹出窗口处理方法及装置 |
| CN104267947A (zh) * | 2014-09-23 | 2015-01-07 | 广州金山网络科技有限公司 | 一种编辑弹窗图片的方法及弹窗图片编辑装置 |
| CN104331233A (zh) * | 2014-10-27 | 2015-02-04 | 天津三星通信技术研究有限公司 | 便携式终端及其内容预览方法 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR101695816B1 (ko) * | 2010-07-19 | 2017-01-13 | 엘지전자 주식회사 | 이동 단말기 및 그 제어방법 |
-
2017
- 2017-09-29 CN CN201710912116.6A patent/CN109582188B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102243642A (zh) * | 2010-05-14 | 2011-11-16 | 索尼公司 | 信息处理设备和方法、以及程序 |
| CN102778997A (zh) * | 2011-12-15 | 2012-11-14 | 联想(北京)有限公司 | 一种窗口显示方法及装置 |
| CN102831148A (zh) * | 2012-06-19 | 2012-12-19 | 北京奇虎科技有限公司 | 一种基于浏览器的推荐数据加载方法和装置 |
| CN103530026A (zh) * | 2013-10-31 | 2014-01-22 | 北京国双科技有限公司 | 网页弹出框定位方法和装置 |
| CN103558961A (zh) * | 2013-11-07 | 2014-02-05 | 北京国双科技有限公司 | 弹出窗口处理方法及装置 |
| CN104267947A (zh) * | 2014-09-23 | 2015-01-07 | 广州金山网络科技有限公司 | 一种编辑弹窗图片的方法及弹窗图片编辑装置 |
| CN104331233A (zh) * | 2014-10-27 | 2015-02-04 | 天津三星通信技术研究有限公司 | 便携式终端及其内容预览方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109582188A (zh) | 2019-04-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109582188B (zh) | 一种实现弹窗内元素定位的方法、装置及相关设备 | |
| US20180247263A1 (en) | Method and apparatus for adjusting merchant delivery range | |
| CN107229454B (zh) | 混合视图的显示方法及装置 | |
| CN107526592B (zh) | 一种页面适配方法和装置 | |
| CN106528578B (zh) | 一种信息展示方法及装置 | |
| CN109460540A (zh) | 一种表格分页显示方法及装置 | |
| CN105373593B (zh) | 一种展示网页中目标元素的方法及装置 | |
| CN105988793A (zh) | 用于屏幕显示设备的图像展示方法及装置 | |
| CN104572431A (zh) | 一种测试方法及装置 | |
| CN109683773A (zh) | 语料标注方法和装置 | |
| CN114428657B (zh) | 一种在H5端基于Taro框架的滑动方法与设备 | |
| CN110020363A (zh) | 绘制热力图的方法及装置 | |
| CN111125575A (zh) | 网页数据处理方法和装置 | |
| CN109508134A (zh) | 一种地图标注方法和装置 | |
| CN106648567B (zh) | 数据获取方法及装置 | |
| CN110968385A (zh) | 比例显示方法和装置 | |
| CN110837368A (zh) | 一种数据处理的方法、装置及电子设备 | |
| CN112256356A (zh) | 一种页面数据获取方法和装置 | |
| CN111209009B (zh) | 内容发布方法及装置、存储介质及电子设备 | |
| CN110968811B (zh) | 显示控制方法和装置 | |
| CN109101144B (zh) | 热力图绘制方法及装置 | |
| CN110020291B (zh) | 网页布局的处理方法及装置 | |
| CN112560403A (zh) | 文本的处理方法及装置、电子设备 | |
| CN112394868A (zh) | 网页弹框中目标信息的定位方法及装置 | |
| CN110020285B (zh) | 柱状图的处理方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 100080 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing Applicant after: Beijing Guoshuang Technology Co.,Ltd. Address before: 100086 Beijing city Haidian District Shuangyushu Area No. 76 Zhichun Road cuigongfandian 8 layer A Applicant before: Beijing Guoshuang Technology Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |