`

js与jquery获得页面大小、滚动条位置、元素位置

 
阅读更多
//页面位置及窗口大小

function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY)
{    // Mozilla  
scrW = window.innerWidth + window.scrollMaxX;  
scrH = window.innerHeight + window.scrollMaxY;
}
else if(document.body.scrollHeight > document.body.offsetHeight)
{    // all but IE Mac  
scrW = document.body.scrollWidth;  
scrH = document.body.scrollHeight;
} else if(document.body)
{ // IE Mac  
scrW = document.body.offsetWidth;  
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight)
{ // all except IE  
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight)
{    // IE 6 Strict Mode  
winW = document.documentElement.clientWidth;   
winH = document.documentElement.clientHeight;
} else if (document.body) { // other  
winW = document.body.clientWidth;  
winH = document.body.clientHeight;
}    // for small pages with total size less then the viewport
var pageW = (scrW<winW) ? winW : scrW;
var pageH = (scrH<winH) ? winH : scrH;  
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};

};

//滚动条位置
function GetPageScroll()
{
var x, y; if(window.pageYOffset)
{    // all except IE  
y = window.pageYOffset;  
x = window.pageXOffset;
} else if(document.documentElement && document.documentElement.scrollTop)
{    // IE 6 Strict  
y = document.documentElement.scrollTop;  
x = document.documentElement.scrollLeft;
} else if(document.body) {    // all other IE  
y = document.body.scrollTop;  
x = document.body.scrollLeft; 
}
return {X:x, Y:y};

}


jquery

获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();

获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

计算元素位置和偏移量
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo  指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll  是否把 滚动条计算在内,默认TRUE
options.padding  是否把padding计算在内,默认false
options.margin   是否把margin计算在内,默认true
options.border  是否把边框计算在内,默认true
分享到:
评论

相关推荐

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

    总的来说,无论是使用纯JavaScript还是JQuery,都可以灵活地获取页面的尺寸、滚动条位置和元素位置。对于开发者而言,了解并掌握这些方法将有助于提高前端开发的效率和质量。希望本文所提供的知识点能够帮助大家在...

    jQuery实现页面滚动时元素智能定位

    4. **计算元素位置**:当页面滚动时,我们需要重新计算元素相对于视口的位置。可以使用`$(window).scrollTop()`获取当前滚动条在垂直方向上的位置,然后结合元素的原始位置,确保元素始终处于屏幕的特定位置。 5. *...

    jquery.mCustomScrollbar自定义滚动条插件

    2. **初始化插件**:通过jQuery选择器选择需要应用滚动条的元素,并调用`.mCustomScrollbar()`方法进行初始化。 3. **配置选项**:可以设置各种参数来定制滚动条的行为,例如`scrollInertia`用于设置滚动速度,`...

    jquery很炫的滚动条效果

    总结来说,通过结合jQuery、CSS和JavaScript,我们可以创造出与网站设计风格相匹配的、具有动画效果的滚动条,从而提升用户的浏览体验。记得在实践中不断测试和优化,确保滚动条在各种设备和浏览器上都能正常工作。

    jQuery全屏页面滚动效果页面上下滚动效果代码jq插件

    在回调函数中,我们需要获取当前滚动条的位置,这可以通过`$(window).scrollTop()`来实现。根据滚动条的位置,我们可以计算出哪些内容应该显示,哪些应该隐藏。如果页面内容被分成了多个部分(通常每个部分占据一...

    JQUERY插件之自定义滚动条DEMO

    这个插件可能通过监听滚动事件,动态改变滚动条的大小、位置和样式,以实现定制化的用户体验。 在CSS方面,我们可以使用伪元素`:hover`, `:active`和`:focus`来控制滚动条的状态,以及`::-webkit-scrollbar`和`::-...

    jquery随页面滚动最终固定顶部的导航条插件

    标题中的“jquery随页面滚动最终固定顶部的导航条插件”指的是一个基于jQuery的JavaScript插件,该插件实现了一种交互效果:当用户在网页上滚动时,导航条会从页面底部开始移动,随着页面的向下滚动逐渐靠近顶部,...

    jQuery平滑页面滚动切换特效.zip

    4. 可能还需要处理滚动条的自动绑定,例如当页面加载或窗口大小改变时,确保滚动效果始终有效。 总的来说,"jQuery平滑页面滚动切换特效"是通过jQuery库和相关的JavaScript技巧实现的,结合CSS和图片资源,为用户...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    总结来说,为了使滚动条不影响页面宽度,需要将页面元素的宽度与浏览器窗口宽度一致,并隐藏水平滚动条,同时注意保持内部布局元素的宽度一致性,并留心隐藏滚动条可能带来的布局问题。在实际操作中,还需要根据具体...

    jQuery页面滚动文字图片元素淡入动画特效

    5. **条件判断**:在用户滚动到特定位置时,通过比较元素位置与视口位置,可以决定是否启动动画。例如,当元素的顶部距离小于或等于视口的底部时,可以开始淡入动画。 6. **CSS准备**:为了实现淡入效果,需要预先...

    jquery使用div实现滚动条效果

    &lt;title&gt;jQuery滚动条效果 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; .scrollable { height: 200px; overflow-y: scroll; border: 1px solid #ccc; } &lt;!-- 很多内容 --&gt;...

    jquery页面滚动始终页面顶部固定层代码

    `scrollTop`获取当前滚动条的垂直位置。如果滚动的距离超过了固定层的初始位置(即`.fixed-header`的偏移量),我们就给它添加一个"class='fixed'",这将在CSS中定义为固定定位。反之,如果回到顶部,就移除这个...

    保持页面滚动条位置的javascript代码

    这一功能对于提升用户体验非常重要,尤其是在长篇文档、论坛或博客等场景下,用户可能需要在阅读过程中进行其他操作,然后再回到阅读的地方,此时保存滚动条位置的功能就显得尤为必要。 ### 一、基本原理 在网页中...

    jQuery实现页面滚动切换

    在jQuery中,我们可以使用`$(window).scroll()`函数来监听滚动事件,`$(window).scrollTop()`获取当前滚动条的位置。 **二、创建HTML结构** 首先,我们需要一个基本的HTML页面结构,包含多个需要切换的区块。这些...

    jQuery全屏页面滚动导航切换效果

    - 计算滚动位置:`$(window).scrollTop()`获取当前滚动条距离顶部的距离。 - 检测可视区域:通过比较滚动位置和各个页面区域的位置,判断哪个页面部分处于视口内。 - 切换导航高亮:当检测到某个页面部分在视口内...

    jquery控制滚动条下拉后DIV容器在页面中的位置

    标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能,即在用户滚动网页时,使指定的DIV元素始终保持在屏幕的某个固定位置,这种效果通常被称为“粘性导航”或“固定定位”。...

    jQuery平滑滚动到页面指定位置

    jQuery提供了`animate()`方法,可以用来改变元素的CSS属性,包括滚动条的位置。这里我们创建一个函数,用于监听点击事件,并平滑滚动到页面指定的位置: ```javascript $(document).ready(function() { // 假设...

    jQuery实现将div的滚动条滚动到指定位置

    &lt;title&gt;jQuery滚动条示例 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; #scrollArea { width: 300px; height: 200px; overflow: auto; } .content { height: 500px; /* 创建...

    jquery滚动条-2

    在IT行业中,jQuery是一个广泛使用的...总的来说,jQuery滚动条的实现涉及到了JavaScript编程、CSS样式设计以及jQuery插件的应用。通过这些技术,开发者能够创造出既美观又实用的滚动条效果,提升用户的浏览体验。

Global site tag (gtag.js) - Google Analytics