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

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

【技术实现步骤摘要】
一种页面元素的定位方法及移动终端
本专利技术涉及移动终端开发
，尤其涉及一种页面元素的定位方法及移动终端。
技术介绍
元素Affix效果是指浏览器页面滚动时，将页面元素吸附在可视范围内的现象。目前的技术方案都是通过对页面进行Scroll滚动事件监听，并设置CSSposition：fixed(这里是指浏览器视口的顶部边缘与指定元素顶部边缘的距离)来实现，要想在所有平台的浏览器中实现这种效果，需要依赖一些优秀的Javascript类库(例如bootstrap的affix插件)。但，上述实现Affix效果的技术方案，实现方式都是监听页面滚动，并切换HTML元素ClassName(实际使用CSS:position:fixed/static切换)来模拟元素定位，并且都是基于浏览器视口viewport来定位。对于一些低端浏览器而言，会产生滚动监听的性能损耗，另外，有些低端浏览器不能实现页面内某子滚动容器的内部Affix效果。再者，Fixed定位是以浏览器视口为基准的，那么在子容器内滚发生时，元素不能在容器内实现Affix效果。基于此，本文档来自技高网...

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

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


2.如权利要求1所述的页面元素的定位方法，其中，判断所述滚动参考容器是否等于浏览器窗口的步骤还包括：
如果所述滚动参考容器等于浏览器窗口，则对目标元素进行滚动事件监听，以判断目标元素是否滚动至浏览器窗口的顶部边缘；
在确定目标元素滚动至浏览器窗口的顶部边缘时，对目标元素进行固定定位。


3.如权利要求1或2所述的页面元素的定位方法，其中，根据目标元素、定位父级容器、滚动参考容器的位置信息对目标元素进行定位的步骤包括：
基于所述位置信息确定目标元素到滚动参考容器顶部边缘的距离、目标元素到父级定位容器顶部边缘的距离；
确定目标元素的滚动距离、定位位置相对于滚动参考容器顶部边缘的预定偏移值；
基于滚动距离与目标元素到滚动参考容器顶部边缘的距离、目标元素到父级定位容器顶部边缘的距离、预定偏移值之间的关系来对目标元素进行绝对定位。


4.如权利要求3所述的页面元素的定位方法，其中，对目标元素进行绝对定位的步骤进一步包括：
当SD＜AR+HP-AP-HA-D时，其中，SD表示滚动距离，AR表示目标元素到滚动参考容器顶部边缘的距离，HP表示父级定位容器高度，AP表示目标元素到父级定位容器顶部边缘的距离，HA表示目标元素高度，D表示预定偏移值：
在所述目标元素的初始位置建立占位元素，并基于所述父级定位...

【专利技术属性】
技术研发人员：马佳栋，
申请(专利权)人：北京齐尔布莱特科技有限公司，
类型：发明
国别省市：北京;11