jQuery——滚动条位置的获取与设置_jquery获取滚动条位置_sleepwalker_1992的博客

将函数绑定到 scroll 事件

$(selector).scroll(function)

function	可选。规定当发生 scroll 事件时运行的函数。

function

可选。规定当发生 scroll 事件时运行的函数。

2、滚动条位置的获取与设置

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>滚动条位置的获取与设置</title>
    <style>
            width: 500px;
            height: 500px;
            overflow: scroll;
            text-indent: 2em;
            width: 1000px;
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            //获取滚动条的位置
           $("button:eq(0)").click(function () {
               console.log($("div").scrollTop());
               console.log($("div").scrollLeft());
           //设置滚动条的位置
            var i = 0;
            $("button:eq(1)").click(function () {
                i += 100;
                $("div").scrollTop(i);
                $("div").scrollLeft(i);
    </script>
</head>
    <button>获取滚动条的位置</button>
    <button>设置滚动条的位置</button>
        <h1>鲁迅简介</h1>
        <p>鲁迅〔1881年9月25日~1936年10月19日〕，中国文学家、思想家和革命家。原名周树人，字豫才，浙江绍兴人。出身于破落封建家庭。青年时代受进化论、尼采超人哲学和托尔斯泰博爱思想的影响。1902年去日本留学，原在仙台医学院学医， 后从事文艺工作，企图用以改变国民精神。
            1905-1907年，参加革命党人的活动， 发表了《摩罗诗力说》、《文化偏至论》等论文。期间曾回国奉母命结婚，夫人朱安。 1909年，与其弟周作人一起合译《域外小说集》，介绍外国文学。同年回国， 先后在杭州、绍兴任教。辛亥革命后，曾任南京临时政府和北京政府教育部部员、
            佥事等职，兼在北京大学、女子师范大学等校授课。1918年5月，首次用"鲁迅"的笔名，发表中国现代文学史上第一篇白话小说《狂人日记》，奠定了新文学运动的 基石。五四运动前后，参加《新青年》杂志工作，成为"五四"新文化运动的主将。 1918年到1926年间，陆续创作出版了
            小说集《呐喊》、《彷徨》、论文集《坟》、 散文诗集《野草》、散文集《朝花夕拾》、杂文集《热风》、《华盖集》、《华盖集续编》等专集。其中，1921年12月发表的中篇小说《阿Q正传》，是中国现代文学 史上的不朽杰作。1926年8月，因支持北京学生爱国运动，为北洋军阀政
            府所通缉， 南下到厦门大学任中文系主任。1927年1月，到当时的革命中心广州，在中山大学任教务主任。1927年10月到达上海，开始与其学生许广平同居。1929年，儿子周海婴 出世。1930年起，先后参加中国自由运动大同盟、中国左翼作家联盟和中国民权保障同盟，反抗国民党政
            府的独裁统治和政治迫害。从1927年到1936年，创作了历史 小说集《故事新编》中的大部分作品和大量的杂文，收辑在《而已集》、《三闲集》、 《二心集》、《南腔北调集》、《伪自由书》、《准风月谈》、《花边文学》、 《且介亭杂文》、《且介亭杂文二编》、《且介亭杂文末编》、
            《集外集》和《集外集拾遗》等专集中。鲁迅的一生，对中国文化事业作出了巨大的贡献:他领导并支持了"未名社"、"朝花社"等文学团体;主编了《国民新报副刊》〔乙种〕、 《莽原》、《语丝》、《奔流》、《萌芽》、《译文》等文艺期刊;热忱关怀、积极培养青年作者;大力翻译外国
            进步文学作品和介绍国内外著名的绘画、木刻;搜 集、研究、整理了大量的古典文学，编著《中国小说史略》、《汉文学史纲要》，整 理《嵇康集》，辑录《会稽郡故书杂录》、《古小说钩沈》、《唐宋传奇录》、 《小说旧闻钞》等等。1936年10月19日因肺结核病逝于上海，上海民众
            上万名自发 举行公祭、送葬，葬于虹桥万国公墓。1956年，鲁迅遗体移葬虹口公园，毛泽东为重建的鲁迅墓题字。1938年出版《鲁迅全集》〔二十卷〕。中华人民共和国成立后， 鲁迅著译已分别编为《鲁迅全集》〔十卷〕，《鲁迅译文集》〔十卷〕，《鲁迅日记》〔二卷〕，《鲁迅书信集》，
            并重印鲁迅编校的古籍多种。1981年出版了《鲁迅全集》〔十六卷〕。北京、上海、绍兴、广州、厦门等地先后建立了鲁迅博物馆、 纪念馆等。鲁迅的小说、散文、诗歌、杂文共数十篇〔首〕被选入中、小学语文课 本。小说《祝福》、《阿Q正传》、《药》等先后被改编成电影。</p>
        <h1>文艺影响</h1>
        <p>鲁迅是20世纪的文化巨人，他在小说、散文、杂文、木刻、现代诗、旧体诗、名著翻译、古籍校勘和现代学术等多个领域都有巨大贡献。作为中国现代文学的伟大奠基者，鲁迅创作的为数不多的小说建立了中国小说的新形式；他所创作散文更是“显示了文学革命的实绩”；他的所开创的杂文文体富有现代性、
        自由性、批判性和战斗性，是后世作家最常使用的“批判武器”，他所创作的杂文更是中国社会、政治、历史、法律、宗教、道德、哲学、文学、艺术乃至文化心理、民性、民情、民俗……的百科全书。几乎所有的中国作家都在鲁迅开创的基础上，发展了不同的方面的文学风格体式。作为翻译家他大量的翻译了
        外国的文学作品、科学自然作品为开启民智，引入先进的科学文化思想做出了巨大的贡献。而作为美术爱好者鲁迅大量引进了西方木刻、版画作品，并在精神、理论和精神等多方面支持青年人学习木刻、版画艺术，极大的推进了现代木刻、版画在现代中国的传播与发展，为现代中国的美术事业做出卓越的贡献。</p>
        <h1>学术影响</h1>
        <p>作为一名学术研究者，一方面，鲁迅运用西方的文学观念研究中国古典小说撰写了《中国小说史略》，其不仅结束了“中国之小说自来无史”的时代，也创造了文学史著作的典型范例，“为后学开示无数法门”，郭沫若将其与王国维的《宋元戏曲史》并称为为中国近代学术史上的双璧。另一方面他整理校对勘正了
        《古小说钩沉》《嵇康集》《汉画像集》《会稽郡故书杂集》等数十部古籍，为后世的古典文学研究留下了一笔巨大财富。</p>
        <h1>精神影响</h1>
        <p>鲁迅堪称现代中国的民族魂，他的精神深刻影响着他的读者、研究者，以至一代又一代的中国现代作家、现代知识分子。鲁迅同时又是20世纪世界文化巨人之一。他创造了“内外两面，都和世界的时代思潮合流，而又并未梏亡中国的民族性”，并具有独特的个人风格的“现今想要参与世界上的事业的中国人”的文学。
        他与同时期的世界杰出的思想家和文学家一样，在关注本民族的同时，也在关注着人类共同面临的问题，并做出了自己的独特贡献。</p>
        <h1>政治影响</h1>
        <p>鲁迅一生追求民主，早在新文学运动伊始时期便向封建旧文化宣战，不断与压迫民众的旧思想旧文化斗争。“女师大学潮”发生后与迫害学生的军阀进行论争，鲁迅不畏强暴执笔对战，显示出一个正直文人的气概。尔后国民党统治之下又大胆披露其黑暗统治。三十年代又与共产党内左倾的错误文艺路线进行斗争，
            其后与党领导下的文艺工作者合作成立了无产阶级文艺思想领导的左翼作家联盟，鲁迅作为左联的盟主，领导左联粉碎了国民党反动文艺妄图绞杀无产阶级文艺的阴谋。</p>
</body>
</html>

1、 jQuery——固定导航栏：点击打开链接

2、 jQuery——浏览器窗口两侧跟随的广告案例：点击打开链接

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;滚动条位置的获取与设置&lt;/tit

$(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 var viewH = $(window).height(); //可见高度 var contentH = $(document).height(); //内容高度代码如下: [removed] = function(){ var h = document.documentElement.scrollHeight || document.body.scrollHeight; window.scrollTo(h,h); 以上2种方法均可以实现页面加

实现 jQuery 根据 滚动条 位置加载相应的内容：向下滚动时当内容区域滚动到可视窗口高度的一半时，加载动画内容；向上滚动到相应的内容区域时也重新加载动画内容！ 1.实现思路：先静态布局好HTML结构，使用伪类：hover模拟动画效果，再使用 jQuery 控制动画类名的切换来实现效果！主要判断滚动的方向，以及相应方向上加载动画的时机（即何时才加载动画的判断条件！关键点！）。 2.思维草稿图：向下滚动加载动画判断条件：（代码中addClass()函数）向上滚动加载动画判断条件：（代码中addClass2()函数） 3.代码实现： HTML： <div class=header>

在开发项目时，常常需要展示大量数据。如果全部显示出来，数据相对少时，看不出来什么不同，如果数据很多时，一次请求全部显示，这就相当可怕了。面对这种问题，PC里使用了分页效果，将数据分成一页页，换页时请求当前页数据，而屏幕较小的移动端，分页就不怎么好看了，常用的方法是滚动到底部时继续加载数据滚动加载其实也是一种分页，只是不使用页码而已。（一）、滚动事件的效果和原理效果：滚动到当前页的底部时...

jQuery 获取位置和尺寸相关函数： $(document).height() 获取整个页面的高度 $(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的 scrollTop() 获取匹配元素相对 滚动条 顶部的偏移。

因为浏览器的兼容问题，如果使用javascript 获取这些数值是一个相当痛苦的过程。好在 JQuery 提供了简单优雅，并且兼容的解决方法。获取浏览器和页面文档的宽度和高度代码如下: // 获取浏览器显示区域的高度 $(window).height(); // 获取浏览器显示区域的宽度 $(window).width(); // 获取页面的文档高度 $(document.body).height(); // 获取页面的文档宽度 $(document.body).width(); 获取 滚动条 的位置代码如下: // 获取 滚动条 到顶部的垂直高度 $(document).scrollTop(); //获

可以使用 jQuery 的 `mousewheel` 插件来实现鼠标滚轮控制横向 滚动条 的滚动。首先，需要在页面中引入 ` jquery .mousewheel.js` 文件： ```html <script src="/path/to/ jquery .mousewheel.js"></script> 然后，可以通过以下方式来使用 `mousewheel` 插件： ```javascript $(selector).mousewheel(function(event, delta, deltaX, deltaY) { // 处理滚轮事件其中，`selector` 是要绑定滚轮事件的元素的选择器，`deltaX` 变量表示横向滚动的距离，当鼠标滚轮向左滚动时，`deltaX` 为负数；当鼠标滚轮向右滚动时，`deltaX` 为正数。例如，下面的代码可以使用鼠标滚轮向左或向右滚动一个横向 滚动条 ： ```javascript $('#scrollbar').mousewheel(function(event, delta, deltaX, deltaY) { // 将 滚动条 向左或向右滚动一段距离 $('#scrollbar').scrollLeft($('#scrollbar').scrollLeft() - deltaX); 希望这能帮到你！