offsetWidth与scrollLeft

有两个值一个是:scrollTop一个是scrollLeft
第一个代表页面利用滚动条滚动到下方时,隐藏在滚动条上方的页面的高度;
第二个代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度

document.body.scrollLeft

document.body.scrollTop

2.如果父的overflow没有hidden的话,那么此父的scrollLeft一直为0.

时间: 2024-10-10 04:48:22

offsetWidth与scrollLeft的相关文章

完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth

有时候项目中会用到用js获取元素位置来定位元素,我在网上开了大量的   图解,代码,最终把我搞的晕了,还是结合网上的 自己来总结一下,首先来看看网上的: DOM的定义如下图 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offse

jq图片无限循环滚动

刚开始写的这段代码没有加判断false出现错误,即鼠标第二次放上去不会停止滚动且移开之后滚动速度加快.加了之后就变正常了,banner滚动也一样. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" medi

javascript-图片横向无缝隙滚动(可在服务器运行)

前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了. css代码: 1 <style type="text/css"> 2 .scroll_div { 3 width: 1000px; 4 height: 250px; 5 margin: 0 auto; 6 overflow: hidden; 7 white-space: nowrap; 8 background: #ffffff; 9 } 10

js图片无缝滚动

<html> <head> <title>图片滚动</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style> #demo { background:#fff; overflow: hidden; width:500px; border: 1px solid #ccc; } #demo

减少浏览器的reflow和repaint

1.避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种: (1). 先将元素从document中删除,完成修改后再把元素放回原来的位置 (2). 将元素的display设置为”none”,完成修改后再把display修改为原来的值 (3). 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document 2.集中修改样式 (1). 尽可能少的修改元素style上的属

JavaScript公共函数

[在此处输入文章标题] // JScript 文件 /* ================================================================== JS 公共函数 080827 ============================================================ */ /* ================================================================== 功能: =

文字自动自左向右滚动的js代码

重要的一点,就是scrollLeft一直在变化.对象一直在移动,参照物没有动. 代码: css: #div1{display:black;width:110px;height:50px;line-height:50px;white-space:nowrap;overflow:hidden;background-color:#a2a2a2;margin:15px;padding:5px 15px;} span{display:inline-block;color:#fff;padding-righ

2015第11周一

今天写了近一天代码,感觉比较充实,但由于解决的大部分都是自己知道或简单尝试就能做好的事,就没什么成就感,但提前定下目标,果断按计划执行总是没错. 减少重绘,提高性能: 1.避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种: (1). 先将元素从document中删除,完成修改后再把元素放回原来的位置 (2). 将元素的display设置为"none",完成修改后再把display修改为原来的值

div滚动效果

废话不多说,直接贴代码,将代码复制到文件中直接用浏览器打开即可看到效果: 高度或宽度,以及内容数量都会对结果产生影响,请仔细调整.<br> <!-- ######################################### --> <br>向上滚动效果: <div id="div_up_1" style="overflow:hidden; height:60px; width:120px;"> <div