Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示)。当访问者滚动页面的时候,一部分文档会从视线中消失。例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内。这意味着浏览器窗口的左上角和文档的左上角并不相同。如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner;而如果只是试图将元素的left和top位置设置为0,将会遇到麻烦,你实际上只是将其放到了文档的顶部,但是却位于浏览器窗口之外。

幸运的是,jQuery提供了两个函数,允许你确定从顶部和左边滚动页面的多少部分(换句话说,文档的多少像素存在于浏览器窗口的上边和左边)。要确定文档的多少部分在浏览器窗口之上,使用如下所示这行代码:

复制代码代码如下:
$(document).scrollTop()

要确定文档的多少部分位于屏幕的左边,使用如下所示这行代码:

复制代码代码如下:
$(document).scrollLeft()

这两个函数都返回一个像素值,你可以用它来定位页面上的另一个元素。例如,如果你想要将一个弹出窗口定位于页面的中心,即便在某人向下滚动之后也是如此,那么,你需要确定访问者滚动了多远,并且移动弹出窗口,以使得很多额外元素位于页面的下方。在弹出工具的提示的例子中,当访问者已经向下滚动一个页面,要定位工具提示时,你需要小心:很容易意外地将工具提示放到页面空间中,但是,却在浏览器的视口中可见区域之外。使用scrollTop()来避免将一个工具提示放在浏览器窗口顶部的可视区域之上。

浅谈jQuery页面的滚动位置scrollTop、scrollLeft的更多相关文章

  1. 浅谈jQuery中的Ajax

    浅谈jQuery中的Ajax 一.前言 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post ...

  2. 浅谈jquery关于select框的取值和赋值

    浅谈jquery关于select框的取值和赋值   jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...

  3. vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法

    如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫 ...

  4. [原创]浅谈H5页面性能优化方法

    [原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大 ...

  5. [原创]浅谈H5页面性能测试

    [原创]浅谈H5页面性能测试 H5页面我想各位都不陌生,随着移动互联网兴起,不管是App,还是H5都火起来了,最突出的2个表现是ios/android/前端等工程师薪水大涨,尤其是资深前端工程师40W ...

  6. [原创]浅谈H5页面测试介绍

    [原创]浅谈H5页面测试介绍 目前移动互联网非常火热,除了各种App,H5也是非常热,由于H5跨平台,且版本更新容易,做为引流或获客是非常好的一种简单低成本平台:今天来谈谈H5页面测试都要测试什么? ...

  7. 车大棒浅谈jQuery源码(二)

    前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...

  8. vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

    需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...

  9. 浅谈WEB页面提速(前端向)

    记得面试现在这份工作的时候,一位领导语重心长地谈道——当今的世界是互联网的世界,IT企业之间的竞争是很激烈的,如果一个网页的加载和显示速度,相比别人的站点页面有那么0.1秒的提升,那也是很大的一个成就 ...

随机推荐

  1. java 22 - 17 多线程之等待唤醒机制(接16)

    先来一张图,看看什么叫做等待唤醒机制 接上一章的例子. 例子:学生信息的录入和获取 * 资源类:Student  * 设置学生数据:SetThread(生产者) * 获取学生数据:GetThread( ...

  2. Treap入门(转自NOCOW)

    Treap 来自NOCOW Treap,就是有另一个随机数满足堆的性质的二叉搜索树,其结构相当于以随机顺序插入的二叉搜索树.其基本操作的期望复杂度为O(log n). 其特点是实现简单,效率高于伸展树 ...

  3. C# String.split()用法小结。String.Split 方法 (String[], StringSplitOptions)

    split()首先是一个分隔符,它会把字符串按照split(' 字符')里的字符把字符串分割成数组,然后存给一个数组对象. 输出数组对象经常使用foreach或者for循环. 第一种方法 string ...

  4. HTML 学习笔记 CSS样式(背景)

    背景色 可以使用background-color属性为元素设置背景色 这个属性接受任何合法的颜色值. 可以使用background-image属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...

  5. Dubbo架构设计详解

    from:http://shiyanjun.cn/archives/325.html Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解 ...

  6. windows live Writer test

    package com.newegg.shopping.util.listener; import javax.servlet.http.HttpSessionAttributeListener; i ...

  7. java.sql.preparedstatement和java.sql.statement的区别

    本文转自CSDN,然后整理了一遍.原文出处:CSDN JDBC(java database connectivity,java数据库连接)的api中的主要的四个类之一的java.sql.stateme ...

  8. 使用NIFTI指令画nii图像

    ❤ 关于几种显示工具 mricro:显示出来的左右脑是反着的: mricroN,SPM,xjview,BrainNetViewer:显示出的左右脑是正确的,并且对于做过仿射变换的图像可以自动识别并且校 ...

  9. SQL Server存储过程中使用表值作为输入参数示例

    这篇文章主要介绍了SQL Server存储过程中使用表值作为输入参数示例,使用表值参数,可以不必创建临时表或许多参数,即可向 Transact-SQL 语句或例程(如存储过程或函数)发送多行数据,这样 ...

  10. python中from module import * 的一个陷阱

    from module import *把module中的成员全部导到了当前的global namespace,访问起来就比较方便了.当然,python style一般不建议这么做,因为可能引起nam ...