先贴代码 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.newDiv { //
background: green;
text-indent: 2em;
font-size: 12px;
color: white;
line-height: 17px;
}
</style>
<title>123</title>
<script>
var interval;
var i = 1;
var active = false;
var scrolling = false;
function scroll(_this) {
if (!active) {
if (_this.offsetHeight + _this.scrollTop >= _this.scrollHeight - 20) {
active = true;
var intervalId = setInterval(appendDiv(_this), 700);
interval = intervalId;
}
} else {
clearInterval(interval);
active = false;
}
}
function appendDiv(parentDiv) {
return function() {
var newDiv = document.createElement('img');
//newDiv.innerHTML = "动态加的内容" + (i++);
newDiv.className = 'newDiv';
newDiv.title = '求真像,而不是整过的!!!' ;
newDiv.src = "http://hiphotos.baidu.com/huyangdiy/pic/item/85819207dc413f8109fa93f6.jpg";
parentDiv.appendChild(newDiv);
clearInterval(interval);
active = false;
}
}
</script>
</head>
<body>
<div id="div1"
style="overflow-y: auto; overflow-x: auto; height: 400px; background: black; width: 400px;"
onscroll="scroll(this);">
<div style="height: 750px; width: 750px;"></div>
</div>
</body>
</html>
此段代码在FireFox下 没一点问题,不论你是用鼠标拖动,还是鼠标滑轮滑动 , 还是键盘上下键来滚动滚动条全都OK 。
而在IE下 鼠标拖动没问题 , 但是鼠标滑轮滑动和键盘上下键来滚动滚动条 有时候能行 , 有时不行 。 不知为嘛 。 哪位大虾帮我来解决一下。
分享到:
相关推荐
下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据 都可以 别忘了引用jquery类库 $(window).scroll(function () { var scrollTop = $(this)....
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...
在Java的Swing库中,滚动条(Scrollbar)和下拉加载(Pull Down)是两个重要的组件,它们常用于创建用户界面,特别是处理大量数据时。`swing之滚动条下拉加载数据源码`这个标题暗示了我们将在 Swing 应用程序中实现...
易语言提供了丰富的事件处理函数,例如“滚动条滚动事件”(ScrollBar_Scroll),在这个事件中,开发者会编写代码来更新画布上显示的图片部分,确保滚动条的位置变化能反映到图片的滚动上。 为了实现图片的加载,...
在现代Web应用中,用户体验是至关重要的,"无刷新联级,滚动条滚动加载数据"是一种提高用户体验的有效技术。这种技术通常被称为无限滚动或者滚动加载,它允许用户在不刷新整个页面的情况下,通过滚动页面来加载更多...
标题“纯css控制内容随滚动条滚动,可放任意位置”以及描述中的“纯CSS实现客服悬浮窗,随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器”都指向了这一技术——固定定位(fixed ...
当下拉菜单选项比较多的时候,select下拉列表内容过多,在IE中默认是30条选项,firefox默认是20条, 超过自动出现滚动条,但是在没出现滚动条时候样式特别不协调。本次上传的代码将提供一种方法将select下拉框添加...
在网页设计中,当用户滚动到页面底部时自动加载新的内容是一种常见的优化用户体验的技术,通常被称为“无限滚动”或“滚动加载”。这种技术在社交媒体网站如新浪微博、Facebook等广泛使用,因为它可以避免用户手动...
滚动条滚动延迟加载图片是一种常见的优化网页性能的技术,也被称为懒加载(Lazy Loading)。这种技术主要应用于图片密集型的网站,如社交媒体、博客或者电子商务平台,目的是减少页面初始加载时间,提升用户体验,...
10. **滚动监听事件**:JavaScript提供了`scroll`事件,开发者可以通过监听这个事件来实现滚动时触发的交互,如无限滚动加载更多内容。 综上所述,动态滚动条不仅关乎用户界面的美观,更涉及到用户体验和交互设计。...
3. **添加内容**:接下来,我们需要将原本要在`GroupBox`中添加的控件添加到`ScrollViewer`中,而不是直接添加到`GroupBox`。这样,当内容超出`ScrollableGroupBox`的边界时,`ScrollViewer`就会自动显示滚动条。 `...
这种技术允许用户在滚动页面时,内容(如图片)会随着滚动条的移动而逐步加载,而不是一次性全部加载到浏览器中。这样做的主要目的是优化用户体验,尤其是当页面包含大量内容时,可以避免一次性加载所有资源导致的...
在VB(Visual Basic)编程环境中,为窗体添加滚动条是一项常见的需求,这可以使得大量数据或内容在有限的屏幕空间内得以展示。本篇将详细介绍如何在VB中实现这一功能,以及滚动条的使用和自定义。 首先,我们要了解...
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...
1. **Jquery选择器**:Jquery提供了丰富的选择器,如ID选择器、类选择器、属性选择器等,使我们能够精准地定位到页面上的滚动条元素,对其进行样式修改或添加动态效果。 2. **Jquery事件**:Jquery支持多种事件,如...
这其实就是一个固定时间内动画加载的效果 主要使用了原生js的setInterval不断执行的代码 在固定时间段内,不断的让某一个数字自增以此达到不断变化(增加)的效果 使用方法: 1、将style.css样式引入...
在ExtJS 4.0版本中,它提供了一系列功能,包括表格面板(Grid Panel)的列管理以及滚动条的动态加载。让我们深入探讨这些核心概念。 1. **列隐藏与显示** 在ExtJS 4.0中,表格面板允许用户动态隐藏或显示列,以...
这个“listview水平滚动条 多级动态异步加载 TreeView 安卓程序demo”就是针对这种需求的一个实例,它展示了如何结合HorizontalScrollView来实现水平滚动,并且结合TreeView和多级动态异步加载技术,提高用户体验。...
例如,加载更多数据后,滚动条的最大值应增加,以便用户可以查看新内容。 2. **窗口缩放**:窗口大小的改变也可能影响滚动条。如果窗口缩小,内容可能无法完全显示,这时滚动条的范围会扩大;相反,窗口放大可能会...
这种布局方式适合于垂直或水平堆叠元素,特别适用于需要在不确定数量的元素中添加滚动条的情况。 首先,我们需要创建一个StackPanel,并将其添加到UI的主要布局中。这通常在XAML文件中完成,但也可以在代码后面动态...