<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>滚动条事件</title>
<script language="javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function (){
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
var nDivHight = $("#Layer3").height();
var a=0;
$("#Layer3").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
var temp=nScrollTop -a;
if((temp)>200){
a=nScrollTop;
<!-- 只需要用ajax替换此部分即可
var str="";
for(var i=0;i<100;i++)
{
str+="<a href='#'>"+1231231+"</a><br>";
}
$("#Layer3").append(str);
--!>
}
});
});
</script>
</head>
<body>
<div id="Layer3" style="height:100px; width:200px; border: 1px solid #999999;padding: 1px;overflow:auto;">
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
<p>1231231</p>
</div>
</body>
</html>
分享到：
相关推荐
本文将深入探讨如何利用`Winform Chart`实现实时数据的更新、图表的滚动以及缩放功能。 ### 1. 实时数据更新 实时数据更新是许多数据可视化的关键需求，特别是在监控系统或者数据分析场景中。`Winform Chart`通过...
本篇文章将深入探讨如何利用 HTML5 和 CSS3 的特性来实现自定义滚动条样式。 一、CSS3 自定义滚动条样式 在 CSS3 中，可以使用伪元素 `::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`、`::-webkit-scrollbar-...
在网页设计中，滚动条是不可或缺的元素，尤其是在长页面中。默认的滚动条样式往往较为单调，不能很好地融入各种网站的设计风格。本教程将详细讲解如何使用jQuery库来实现自定义滚动条，以增强用户体验并提升网页的...
需要注意的是，为了确保滚动条样式生效，可能需要在全局CSS文件中添加额外的样式，或者在`Render`方法内添加内联样式，以覆盖默认样式。同时，为了获得良好的响应式体验，可能还需要考虑不同设备和屏幕尺寸下的滚动...
例如，可以尝试在iframe的CSS样式中添加以下代码来全局禁用滚动条： ```css .layui-layer-iframe .layui-layer-content { overflow: hidden; } ``` 或者针对特定的iframe，添加id并应用样式： ```css #...
2. **UIAppearance协议**：苹果为UIKit提供了一种全局改变UI元素外观的方法，通过UIAppearance协议可以设置滚动条的默认样式，如颜色、透明度等，但它的定制程度有限。 3. **自定义视图（UIView）**：为了实现更...
"可翻阅上一条下一条的网站滚动广告代码"是一种实现这种交互性的技术，主要用于网站上的广告展示。这样的广告设计可以吸引用户的注意力，同时提供更直观的操作方式，使用户能够轻松浏览不同的广告内容。在JavaScript...
在Vue.js框架中实现用户自定义字段显示数据的方法涉及了Vue的基础知识，包括数据绑定、组件交互以及动态内容渲染等。通过上述提供的代码片段和描述，我们可以学习到如何使用Vue来动态地展示用户可选的数据字段，并...
2. **非可视区域处理**：非可视区域的DOM元素不会实际创建，而是用一个或几个占位的`<div>`元素来撑开高度，确保滚动条位置正确。 3. **动态创建和销毁DOM**：当用户滚动列表时，监听滚动事件，根据滚动的位置动态地...
这通常涉及到继承自`View`或`LinearLayout`等容器，并重写`onDraw()`方法以绘制日期选择器的各个组件，如年份、月份、日期、小时、分钟和秒的滚动条。 2. 数字轮盘（Spinner）：在iPhone的日期选择器中，每个日期...
在这个“微信小程序实战”项目中，我们将深入探讨如何利用微信小程序开发工具来实现一些核心功能，如上拉刷新、下拉加载以及视频搜索，这些都是构建一个具有互动性和用户体验良好的小程序不可或缺的部分。...
9. **图片懒加载**：虽然这不是纯CSS的功能，但考虑到性能优化，可以使用CSS配合数据属性来实现图片的懒加载。当图片进入视口时，通过CSS改变`background-image`或`src`属性来加载实际的图片资源。 10. **盒模型...
你可以根据需要控制滚动条的可见性，使其在滚动时保持隐藏，或者只在必要时显示，以保持界面的简洁。 7. **回调函数**： Scrollify提供回调函数，允许开发者在用户滚动到特定部分时执行自定义代码，例如更新导航...
MouseWheel事件是专门处理鼠标滚轮转动的事件，通常与控件的滚动条关联。然而，系统默认情况下，MouseWheel事件只会作用于当前鼠标焦点所在的控件。 为了实现多目标鼠标悬浮滚动，我们需要创建一个全局的MouseWheel...
7. 在实际开发中，还应考虑性能优化，如使用虚拟滚动、懒加载等技术，尤其当数据量较大时。 以上就是使用Vue.js和Element UI实现表格横向和纵向拓展的关键知识点。通过熟练掌握这些概念和技巧，你可以创建出富有...
- 滚动切换可能涉及计算元素的位置和可见性，使用`scrollTop()`和`scrollLeft()`方法控制滚动条，确保正确显示当前选中的标签内容。 6. **响应式设计** - 考虑到现代网页需要适应不同设备和屏幕尺寸，这个菜单...
8.8.2 垂直滚动条控件 225 8.8.3 水平调节控件 226 8.8.4 垂直调节控件 228 8.8.5 水平进度条控件 228 8.8.6 垂直进度条控件 229 8.9 列表框控件 230 8.9.1 下拉式列表控件 230 8.9.2 下拉式图标列表控件 231...
7. **兼容性处理**：在`mouseCoords`函数中，检查`pageX`和`pageY`属性是否存在，这是W3C标准的事件坐标，但IE浏览器使用`clientX`和`clientY`，因此需要做兼容处理，考虑滚动条的影响。 8. **边界检测**：为了使...
在微信小程序中，实现类似今日头条那样可滑动切换的导航栏和内容滚动同步的效果，主要涉及到以下几个关键知识点： 1. **布局结构**： - 主体页面通常采用两层结构，外层是一个横向滚动的`<scroll-view>`作为导航栏...
5. **自定义交互**：为了增强用户体验，可以添加额外的功能，比如通过点击鹰眼图来移动主地图，或者添加滚动条来控制缩放。 6. **优化性能**：如果地图数据量大，可能需要考虑性能优化，如分块加载、延迟渲染等技术...