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>
分享到:
相关推荐
向下滚动使用 JavaScript 向下滚动页面。 ##要求jquery.min.js入门克隆此 repo 并通过<head> [removed]将所有.js文件包含在您的 HTML 文件中 [removed][removed][removed][removed][removed][removed]...
仿新浪微薄效果向下滚动效果javascript
JS不间断向下滚动无缝隙javascript
JavaScript图片连续滚动效果,共有4个效果(向下,向上,向左,向右)可根据需要选择
实现图片文字,向左,向右,向上,向下无缝滚动,适合广告图片展示 浏览器兼容(IE、FF、Opera、NS、MYIE)
使用JavaScript写的无缝滚动例子,向上的向下的向左的向右的滚动都有,大家好好看看吧!
Vue向下滚动加载更多数据scroll案例详解 vue-infinite-scroll 安装 npm install vue-infinite-scroll --save 尽管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入 import infiniteScroll ...
jQuery带按钮向上滚动向下滚动代码.zip
演员-Gif滚动动画描述这个演员很适合: 捕获滚动动画目视检查元素的单击很好地记录向下滚动页面时出现的动画可能很棘手。 您将不得不以恒定的方式向下滚动,以捕获屏幕。 如果您想展示作品或在某处共享它,则...
向下滚动时隐藏元素,向上滚动时显示 来自Google Chrome和Safari移动浏览器的设计模式。 用法 包括jQuery: < script src =" http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js " > </ ...
jquery模拟微博向下不断滚动特效.rarjquery模拟微博向下不断滚动特效.rarjquery模拟微博向下不断滚动特效.rarjquery模拟微博向下不断滚动特效.rarjquery模拟微博向下不断滚动特效.rarjquery模拟微博向下不断滚动特效...
本文实例讲述了JS实现文字向下滚动的方法。分享给大家供大家参考。具体实现方法如下: 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=...
React滚动饲料聊天 UI 和提要的智能滚动 在用户体验方面,当新消息到达时要求用户手动向下滚动聊天框是非常痛苦的。 react-scrollable-feed旨在减轻 React 开发人员管理滚动问题的负担。 相同的概念适用于新内容动态...
Delighters:添加CSS动画以在用户向下滚动时取悦用户
本文实例讲述了javascript实现列表滚动的方法。分享给大家供大家参考。具体如下: index.html如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">...
scrollpup.js - 当页面向下滚动时,在顶部显示当前页面剩余的进度
用图片代替滚动条的滑块,向上,向下按钮。定制出各式各样的效果
使您的组件(例如消息框)向下滚动 现场演示 您可以在此处看到最简单的演示: 安装 $ npm install --save react-stay-scrolled 例子 运行示例: $ cd examples $ npm install $ npm start 用法 import React , { ...
本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考,具体如下: 前面介绍了JS左右无缝滚动效果,现在做下无缝滚动——上下的效果。其他代码和左右的差不多,只是改变的是 offsetTop 的值,并且...
在robotframework中,上下滚动,我们可以使用 execute javascript document.documentElement.scrollTop=600 他的意思是,从页面顶部,向下滚动600 注意:是从页面顶部向下。 如果你想再次向下滚动600,那么你就必须...