Div Scroll Bar (用层模拟滚动条)
时间:2022-04-23
本文章向大家介绍Div Scroll Bar (用层模拟滚动条),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
对Div的盒模型以及Css控制定位都不熟,所以遇到了不少BT问题……好在最终突破了种种困难,基本实现了自己想要的效果。
说明:
- 最大的突破是通过了 xhtml1-transitional.dtd 验证,可以在xhtml文档里正常使用.
- 采用相对定位,使用起来更灵活,可以放在页面任何地方而不用改程序.
- 结构规范,容易扩展.
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Div Scroll Bar </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Xiaosa">
<script language="JavaScript">
<!--
//----------------------------------------
// Name: Div Scroll Bar
// Author: Xiaosa
// Contact: goldenlove518@msn.com
// CreateDate: 2005-7-11
// LastChange: 2005-7-12
//----------------------------------------
var mouseInit = slideInit = 0;
var slider, xscroll, nContent,box;
var xH,xT,nSH,nOH;
function init(){
box = document.getElementById("box");
slider = document.getElementById("slider");
xscroll = document.getElementById("xscroll");
nContent = document.getElementById("nContent");
slider.style.left = xscroll.offsetLeft - xscroll.offsetWidth/2-1;
slider.style.top = xscroll.offsetTop;
slider.style.visibility = "visible";
xH = xscroll.offsetTop + xscroll.offsetHeight - slider.offsetHeight;
xT = xscroll.offsetTop;
nSH = nContent.scrollHeight;
nOH = nContent.offsetHeight;
if(nSH <= nContent.clientHeight){
xscroll.style.visibility = "hidden";
slider.style.visibility = "hidden";
}
}
function xs_scroll(){
// Call Init function
init();
slider.onmousedown =function(){
slider.setCapture();
mouseInit = event.clientY;
slideInit = parseInt(slider.style.marginTop);
slider.onmousemove= setPos;
}
slider.onmouseup = document.onmouseup = function(){
slider.onmousemove = "";
slider.releaseCapture();
}
box.ondragstart = box.onselectstart = function(){
event.returnValue =false;
return false;
}
}
//Set slider Position
function setPos(){
var m = slideInit + (event.clientY - mouseInit);
if (m < 0) m = 0;
if (m > xscroll.clientHeight-slider.offsetHeight) m = xscroll.offsetHeight-slider.offsetHeight;
slider.style.marginTop = m + "px";
nContent.scrollTop = (nSH-nOH)*parseInt(m)/(xscroll.clientHeight-slider.clientHeight);
}
//Reset Box Layout
function window.onresize (){
box.style.left = "0px";
box.style.right = "0px";
}
//-->
</script>
<style>
/* ----------------------- Div Scroll Bar --------------------------------- */
#box {
background:#fefefe;
position:relative;
width:185px;
height:220px;
}
#xscroll {
position:relative;
float:right;
left:auto;
top:auto;
height:100%;
width:1px;
background:red;
}
#slider {
position:absolute;
left:0px;
top:0px;
z-index:1;
width:5px;
height:23px;
visibility:hidden;
background:darkred;
}
#nContent {
color:#6A2A04;
position:relative;
width:180px;
height:220px;
overflow:hidden;
background:#FF9933;
font-size:9pt;
font-family:arial;
}
</style>
</head>
<body onload=" xs_scroll();">
<div id="box">
<div id="xscroll"></div>
<div id="slider" style="margin-top:0px;"> </div>
<div id="nContent">
<span style="font-weight:bold">
We produce strategic events for a
wide cross-section of industries
with a particular emphasis on the
following :</span><br /><br />
* Telecommunications & IT <br />
* Real Estate and Property Management
* Financial Services<br />
* Construction<br />
* FMCG<br />
* Aviation<br />
* Pharmaceutical & Healthcare<br />
* Oil & Gas, Power<br />
* Auto <br />
* Travel & Tourism<br />
* Retail <br />
* Advertising & Marketing<br />
<br />
<span style="font-weight:bold">All the products cover almost every job function of any organization :</span>
<br /><br />
* Marketing & Sales <br />
* Research & Development <br />
* Finance & Tax <br />
* Manufacturing & Operations <br />
* Legal Counsel <br />
* Customer Services <br />
* Human Resources <br />
* Logistic & Supply Chain <br />
* Public Relations <br />
* IT <br />
* Business Development & Strategic Planning
</div>
</div>
</body>
</html>
http://xs.org.cn/2005/xsblog/post/22.html
- Codeforces Round #408 (Div. 2)(A.水,B,模拟)
- php实现文件上传
- Selenium2+python自动化69-PhantomJS使用
- Selenium2+python自动化70-unittest之跳过用例(skip)
- 用php做个简单的日历
- Selenium2+python自动化71-多个浏览器之间的切换
- 总结:JDK1.5-JDK1.8各个新特性
- hihoCoder #1094 : Lost in the City(枚举,微软苏州校招笔试 12月27日 )
- HDU 2563 统计问题(递归,思维题)
- python接口自动化9-https请求(SSL)
- Windows环境下php开启GD库的方法
- python接口自动化10-token登录
- HDU 1000 A + B Problem(指针版)
- Java 10 已发布!时隔 6 月带来 109 项新特性
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- RabbitMQ如何保证消息的可靠投递?
- Python处理json总结
- 使用SpringMVC写一个简单的跳转界面
- 使用自定义注解,设置发送到客户端的响应的内容类型
- Python构造数据的神器库-Faker
- SpringMVC中传参date类型失败,需要@DateTimeFormat(““)
- new ScalarHandler()-->返回值为long,不能用int接收!!!
- JavaWeb使用德鲁伊(略)实现登录、激活码注册(发送激活码到邮箱,点击激活链接后,才能正常登陆)、注册界面
- 转发的两种方式与重定向
- 关于监控、链路追踪、日志三者的区别
- 10.12面试:SpringMVC静态资源放行+如何实现转发和重定向+如何支持json+设置时间格式+设置json的key+对json的value序列化
- 10.13面试:什么是跨域?如何解决跨域问题+springMVC如何处理文件上传和下载+ssm整合思路 (待完善)
- 查找jar地址
- shiro篇:缓存配置
- 定时器篇:定时任务入门小案例