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

javascript 向下滚动

    博客分类:
  • web
web 
阅读更多

Google Reader 阅读器中,当向下拉动到尾部时,它会自动加载下面的部分。

下面的代码主要实现的是向下滚动。

 

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>无限滚动</title>
    <style type="text/css" media="screen">
        ul {width:200px; height:100px; overflow-y:auto;}
    </style>
</head>
<body>
    <ul id="x">
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    <script type="text/javascript" charset="utf-8">
        var i = 0;
        var $ = function (name) {return document.getElementById(name) };
        var a = $('x');
        a.onscroll = function () {
            if ( this.scrollHeight - this.clientHeight - this.scrollTop < 10) {
                console.log (i);
                var li = document.createElement('li');
                li.innerHTML = "hello " + i++;
                this.appendChild (li);
                if (i >= 40) {
                    this.onscroll = null
                       return;
                }

            }
        }
    </script>
</body>
</html>
 
分享到:
评论

相关推荐

    ScrollDown:使用 JavaScript 向下滚动页面

    向下滚动使用 JavaScript 向下滚动页面。 ##要求jquery.min.js入门克隆此 repo 并通过&lt;head&gt; [removed]将所有.js文件包含在您的 HTML 文件中 [removed][removed][removed][removed][removed][removed]...

    JavaScript 无缝上下滚动加定高停顿效果

    根据提供的文件信息,我们可以深入探讨该JavaScript无缝上下滚动加定高停顿效果的实现机制及其应用场景。接下来将详细解析此代码的关键部分,并提取出相关的知识点。 ### 一、概述 本段代码展示了一个利用...

    向上滚动,可控制,点击向上滚动,点击向下滚动

    例如,当用户点击一个“向上滚动”或“向下滚动”的按钮时,通过JavaScript事件监听器,可以触发页面的滚动动作。这可以通过修改window对象的scrollTo方法来实现,该方法接受两个参数,一个是水平方向上的偏移量,另...

    JS控制滚动条自动向下滚动

    在JavaScript(JS)编程中,控制滚动条自动向下滚动是一种常见的需求,特别是在实时聊天、论坛或者日志更新等场景中,我们希望用户能够始终保持看到最新的内容。本篇将详细讲解如何利用JavaScript实现这一功能,以及...

    JS不间断向下滚动.rar

    "JS不间断向下滚动"通常是指利用JavaScript实现页面内容持续自动滚动的效果,这种效果常见于新闻滚动、公告滚动等应用场景,能够使用户在不手动操作的情况下看到不断更新的信息。 在实现JS不间断向下滚动的过程中,...

    原生js间歇文字滚动仿新浪微博评论文字向下滚动效果.rar

    原生js间歇文字滚动仿新浪微博评论文字向下滚动效果.rar

    仿新浪微薄效果向下滚动效果javascript

    在IT行业中,网页动态效果是用户体验的重要组成部分,而“仿新浪微薄效果向下滚动效果javascript”就是一个典型的应用实例。这个效果使得用户在浏览类似微博的信息流时,无需手动翻页,只需持续滚动页面,新的内容就...

    jQuery网页向下滚动数字增加动画特效

    总的来说,"jQuery网页向下滚动数字增加动画特效"是一个巧妙地结合了jQuery滚动事件、动画函数和HTML数据属性的示例,它展示了如何通过JavaScript为网页添加生动的交互体验。通过学习并理解这一特效,开发者可以...

    jquery特效DIV层跟随页面向下滚动

    标题中的"jquery特效DIV层跟随页面向下滚动"指的是在网页设计中使用jQuery库实现的一种交互效果。当用户滚动页面时,一个特定的div元素(通常包含重要的信息或导航)会固定在屏幕的一侧,保持可见,即使用户滚动页面...

    新浪微博文字向下滚动效果

    总结:实现“新浪微博文字向下滚动效果”既可以通过Java的Swing或JavaFX库在桌面应用中实现,也可以在网页上使用HTML、CSS和JavaScript。在网页设计中,CSS的`marquee`属性是一个简单快捷的实现方式,但现代网页更多...

    javascript特效无缝滚动marquee

    这里主要讨论如何通过JavaScript实现向左、向右、向上、向下四个方向的滚动效果。 1. **向左/向右无缝滚动**: - 首先,我们需要创建一个包含滚动内容的容器,并设置合适的宽度,以便内容可以完全显示。 - 使用...

    jquery不断向下滚动幻灯片

    本教程将详细讲解如何使用jQuery实现一个默认在右侧不断向下滚动的幻灯片,同时支持用户通过鼠标悬浮和点击箭头来控制滚动速度,以及同步更新左侧的大图。 ### 1. jQuery基础知识 jQuery 是一个广泛使用的...

    js页面向下滚动浮动层

    在网页设计中,"js页面向下滚动浮动层"是一种常见的用户体验优化技术,它使得特定的元素(如导航菜单)在用户滚动页面时始终保持在屏幕的可见区域。这种效果可以增加用户的交互性和易用性,特别是在内容丰富的长页面...

    JavaScript图片连续滚动效果

    在本主题"JavaScript图片连续滚动效果"中,我们将探讨如何使用JavaScript来创建四种不同的图片滚动效果:向下滚动、向上滚动、向左滚动和向右滚动。这些效果可以提升网站的视觉吸引力,增加用户体验,常用于新闻轮播...

    模拟新浪围脖的间歇性向下滚动显示信息窗口

    标题中的“模拟新浪围脖的间歇性向下滚动显示信息窗口”是指在网页或应用程序中实现类似新浪微博的信息流效果,即信息不断从顶部滚动进入视区,而旧的信息则自动向下移动,以此来呈现动态更新的内容。这种效果常用于...

    jQuery模仿微博常用的文字向下滚动效果

    本教程将深入探讨如何使用jQuery来模仿微博中常见的文字向下滚动效果,这种效果通常用于实时更新信息,如新闻动态、推文或通知等。 首先,我们需要理解微博文字滚动的核心原理。它通常是通过动态改变文本的位置或...

    jQuery向下滚动表格头部固定代码

    在网页设计中,当用户向下滚动页面时,保持表格头部(表头)固定在屏幕顶部是一种常见的需求,以便用户始终能清楚地看到列标题。jQuery是一个轻量级、功能丰富的JavaScript库,它提供了便利的方式来实现这个功能。在...

    jQuery向下滚动浮动显示导航菜单代码

    通过引入jQuery库,我们可以编写更简洁、更高效的JavaScript代码来实现向下滚动浮动显示的导航菜单。 1. 引入jQuery库:在HTML文件中,通过`&lt;script&gt;`标签从CDN(内容分发网络)引入jQuery,例如: ```html ...

    jQuery实现页面向下滚动后显示隐藏导航条

    随着页面内容的增多,为了保持页面的简洁性和优化用户体验,设计师有时会将导航条设置为隐藏,仅当用户向下滚动页面时才显示出来。这种效果可以通过JavaScript库jQuery轻松实现。本文将详细介绍如何使用jQuery来实现...

    jQuery带按钮向上滚动向下滚动代码.zip

    jQuery带按钮向上滚动向下滚动代码是基于流行的JavaScript库jQuery实现的一种网页滚动效果。这个功能通常用于网站页面,尤其是内容较多的页面,以便用户能够轻松地浏览页面内容而无需手动滚动鼠标或触摸屏幕。这种...

Global site tag (gtag.js) - Google Analytics