2024年6月2日发(作者:)

想必大家都注意到的不循环滚动,所以出现了很多替代脚本,或iframe

或JS输出,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:

一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,

demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop

或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位

置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目

的。

先了解一下对象的几个的属性:

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽

好,先看这个向上滚动的代码:

style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>

v id=demo1>

本文发布于:2024-06-02,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:滚动对象获取坐标

发布评论

评论列表(有0条评论)
    福州电脑网_福州电脑维修_福州电脑之家_福州iThome

    福州电脑网_福州电脑维修_福州电脑之家_福州iThome

    福州电脑维修网(fzithome.com)专业的电脑维修,笔记本维修,上门维修各种电脑,笔记本,平板等,快速上门.电脑知识频道内容覆盖:计算机资讯,电脑基础应用知识,各种电脑故障维修学习,电脑外设产品维修维护,病毒,软件,硬件,常识.