[发明专利]一种页面元素的定位方法及移动终端在审

专利信息
申请号: 202010658728.9 申请日: 2020-07-09
公开(公告)号: CN111949264A 公开(公告)日: 2020-11-17
发明(设计)人: 马佳栋 申请(专利权)人: 北京齐尔布莱特科技有限公司
主分类号: G06F8/38 分类号: G06F8/38;G06F9/451;G06F16/957;G06F16/958
代理公司: 北京思睿峰知识产权代理有限公司 11396 代理人: 谢建云;赵爱军
地址: 100080 北京市海*** 国省代码: 北京;11
权利要求书: 查看更多 说明书: 查看更多
摘要:
搜索关键词: 一种 页面 元素 定位 方法 移动 终端
【权利要求书】:

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任一项所述的页面元素的定位方法,其中,还包括步骤:

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

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

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

下载完整专利技术内容需要扣除积分,VIP会员可以免费下载。

该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于北京齐尔布莱特科技有限公司,未经北京齐尔布莱特科技有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服

本文链接:http://www.vipzhuanli.com/pat/books/202010658728.9/1.html,转载请声明来源钻瓜专利网。

×

专利文献下载

说明:

1、专利原文基于中国国家知识产权局专利说明书;

2、支持发明专利 、实用新型专利、外观设计专利(升级中);

3、专利数据每周两次同步更新,支持Adobe PDF格式;

4、内容包括专利技术的结构示意图流程工艺图技术构造图

5、已全新升级为极速版,下载速度显著提升!欢迎使用!

请您登陆后,进行下载,点击【登陆】 【注册】

关于我们 寻求报道 投稿须知 广告合作 版权声明 网站地图 友情链接 企业标识 联系我们

钻瓜专利网在线咨询

周一至周五 9:00-18:00

咨询在线客服咨询在线客服
tel code back_top