`
wyf
  • 浏览: 437995 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

元素的各种位置,偏移量,大小,滚动。

    博客分类:
  • JS
 
阅读更多

      要想知道某个元素在页面上的偏移量,将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加,如此循环直至根元素,就可以得到一个基本准确的值。以下两个函数就可以用于分别 取得元素的左和上偏移量。



 

function getElementLeft(element){
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;
 while (current !== null){
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }
 return actualLeft;
} 

 

function getElementTop(element){
 var actualTop = element.offsetTop;
 var current = element.offsetParent;
 while (current !== null){
 actualTop += current. offsetTop;
 current = current.offsetParent;
 }
 return actualTop;
} 

 客户区大小就是元素内部的空间大小,因此滚动条占用的空间不计算在内。

要确定浏览器 视口大小,可以使用 document.documentElement 或 document.body(在 IE7 之前的版本中)的 clientWidth 和 clientHeight。

function getViewport(){
 if (document.compatMode == "BackCompat"){
 return {
 width: document.body.clientWidth,
 height: document.body.clientHeight
 };
 } else {
 return {
 width: document.documentElement.clientWidth,
 height: document.documentElement.clientHeight
 };
 }
} 



 

 在确定文档的总高度时(包括基于视口的最小高度时),必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值,才能保证在跨浏览器的环境下得到精确的结果。下面就 是这样一个例子。

var docHeight = Math.max(document.documentElement.scrollHeight,
 document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
 document.documentElement.clientWidth); 

 下面这个函数会检测元素是否位 于顶部,如果不是就将其回滚到顶部。

function scrollToTop(element){
 if (element.scrollTop != 0){
 element.scrollTop = 0;
 }
} 

 

 

  • 大小: 20.5 KB
  • 大小: 27.9 KB
  • 大小: 23.2 KB
分享到:
评论

相关推荐

    javascript获取元素偏移量的方法有哪些

    通过四个属性可以获得元素的偏移量: 1、offsetHeight: 元素在垂直方向上占用的空间的大小,(像素)。包括元素的高度,(可见的)水平滚动条的高度,上边框高度和下边框高度。 2、offsetWidth:元素在水平方向上占用...

    JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

    在进行Web开发时,尤其是在使用Ajax技术对页面进行动态更新时,经常需要精确获取页面元素的位置、大小以及滚动条的位置信息。这些信息对于确保元素在页面上正确地显示和交互至关重要。在没有提供原生JavaScript解决...

    JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    这些方法既可以获取当前的滚动位置,也可以设置滚动位置,非常灵活。 三、获取元素位置和偏移量 1. 使用纯JavaScript获取元素位置 要获取元素相对于页面的位置,可以使用`offsetLeft`和`offsetTop`属性。这两个...

    无缝连接可循环滚动布局

    这通常通过计算当前滚动位置、子视图的大小以及布局的总宽度来实现。 3. **利用Scroller进行平滑滚动**:`ForeverLayout`可能使用了`Scroller.startScroll()`方法来启动一个平滑的滚动动画,然后在`onDraw()`方法中...

    jquery.copycat:一个jQuery插件,可将元素的位置和大小复制到另一个元素

    可用options : scroll :滚动元素以侦听滚动事件(默认为window ) handleResize :true以处理调整大小,否则为false(默认为true ) subtractScroll :true减去滚动偏移量,否则返回false(默认为null表示自动) ...

    UIScrollView自动滚动以及手动滚动的实现

    为了实现自动滚动,我们需要设置一个定时器(NSTimer)来定期改变UIScrollView的内容偏移量(contentOffset)。 1. **自动滚动的实现**: - 创建一个NSTimer对象,设定时间间隔(如2秒)。 - 在timer的回调方法中...

    无限滚动TableView示例

    ScrollRect负责滚动效果,RectTransform用于调整UI元素的位置和大小,ListPool则用于对象池管理,提高性能。 三、无限滚动原理 无限滚动的关键在于“按需加载”策略。当用户滚动到接近列表底部时,触发加载新数据的...

    向各个方向的滚动图片js特效

    向左滚动图片的效果通常是通过设置定时器,周期性地改变图片的CSS左偏移量来实现。JavaScript可以获取到图片元素,并动态调整其样式。例如,`element.style.left = newX + 'px'`,其中`newX`是每次滚动的新位置。...

    滚动框演示程序

    3. **滚动逻辑**:根据滚动条的位置计算应该显示的内容部分,这通常涉及到数据的索引和偏移量计算。 **自定义滚动条:** 1. **样式和外观**:开发者可以改变滚动条的颜色、大小、形状等视觉元素,使其与应用程序的...

    【JavaScript源代码】js实现楼层滚动效果.docx

    当点击某个楼层按钮时,计算页面当前的滚动位置(scrollTop)和目标楼层相对于顶部的偏移量(offsetTop)。如果页面滚动距离大于目标楼层的偏移量,说明用户需要向上滚动;反之,需要向下滚动。 为了实现平滑滚动,...

    视差滚动parallax插件.zip

    开发者需要编写代码来监听滚动事件,计算元素的偏移量,然后更新元素的CSS属性,使其看起来像是在以不同的速度移动。 在压缩包中的"视差滚动parallax插件"文件中,可能包含以下内容: - JavaScript文件:这是实现...

    原生js实现云球形滚动特效

    这可以通过在`moveClouds`函数中为每个云球分配随机速度和偏移量来实现。 此外,考虑性能优化,我们可以使用requestAnimationFrame替代`setInterval`,以确保云球滚动与浏览器的渲染同步,从而避免不必要的重绘和...

    C# 水平 垂直 滚动条

    - **当前值**:`Value`属性表示滚动条的当前位置,通常会关联到内容区域的偏移量。 - **步长**:`SmallChange`和`LargeChange`属性分别定义了用户单击滚动箭头和按下滚动条区域时的移动量。 3. **事件处理**: -...

    背景无限循环滚动

    确保滚动过程中背景图像之间的交接是无缝的,这可能需要在拼接图片时就考虑好,或者在滚动时进行特殊处理,如对精灵的偏移量进行取模运算。 总结,实现Cocos2d-x中的背景无限循环滚动涉及到资源加载、精灵管理、...

    WPF 字体滚动,LED大屏展示

    例如,可以设置一个DoubleAnimation来改变TextBlock的偏移量,使其在一段时间内从屏幕一侧移动到另一侧,从而实现滚动效果。 5. **Data Binding**:数据绑定机制允许UI与后台数据模型进行同步,如果需要动态更新...

    水平点击滚动

    4. **计算偏移量**:在处理滚动时,需要计算出每次滚动的距离,这可能涉及到元素的宽度、当前位置和目标位置。例如,如果每个图片的宽度是固定的,那么每次点击可以滚动这个宽度。 5. **边界检测**:为了防止滚动...

    滚动螺旋设计css模板

    例如,使用JavaScript监听滚动事件,根据滚动位置动态改变元素的动画状态,使得滚动螺旋效果更为生动。 6. **性能优化**:由于螺旋效果可能涉及大量元素的动画,所以性能优化是必须考虑的问题。合理使用CSS3硬件...

    scrollView自动滚动

    `contentOffset`表示内容视图相对于滚动视图的偏移量,而`contentSize`定义了内容视图的大小。当调整`contentOffset`时,`UIScrollView`会自动滚动到相应的位置。 ### 2. 动态调整contentSize 对于`UITableView`和...

    unity的UGUI相册滚动效果

    为了实现相册的动态加载,我们可以使用Rect Transforms的锚点和偏移属性,以及RectTransformUtility类的函数来计算和调整元素的位置。这有助于在运行时根据需要加载和卸载图片,从而优化性能,避免一次性加载大量...

    uiscrollview 无缝循环滚动

    `contentOffset`属性则表示当前视图偏移量,用于追踪用户滚动的位置。为了实现无缝循环,我们需要创建一个比实际显示内容更大的`contentSize`,并确保当用户滑到边界时,`contentOffset`能够平滑地过渡到另一边。 ...

Global site tag (gtag.js) - Google Analytics