Div Scroll Bar (用层模拟滚动条)
说明:
- 最大的突破是通过了 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.οnmοusemοve= 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 οnlοad=" 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
Div Scroll Bar (用层模拟滚动条)相关推荐
- Qt官方示例:UI Components: Scroll Bar Example(自定义滚动条)
此示例演示了一个自定义滚动条的方法. 自定义滚动条: import QtQuick 2.0Item {id: scrollBarproperty real position//范围是 0.0 - 1. ...
- NGUI 3.5教程(八)Scroll Bar 滚动条-制作聊天框
NGUI 3.5教程(八)Scroll Bar 滚动条-制作聊天框 分类: Unity NGUI2014-08-05 18:19 2046人阅读 评论(8) 收藏 举报 NGUI 3.5教程NGUI聊 ...
- div横向模拟滚动条,带懒加载
之前工作需要,在网上找了一个横向的div模拟滚动条的方法,后来有自己改动了下,在相关js中加了一个懒加载的方法,贴出来大家一起学习下 首先贴出相当于插件的scrolltools.js var inde ...
- javascript之模拟滚动条
demo代码如下: <!DOCTYPE html> <html> <head lang="en"><meta charset=" ...
- javascript 实现模拟滚动条,但不支持鼠标滚轮
模拟滚动条做项目的时候,很多时候会用到,所以就写了一个这么模拟滚动条,但是不支持滚轮事件 <!doctype html> <html lang="en"> ...
- DIV Scroll属性
DIV Scroll属性详解,为DIV层打造不同的滚动条. 一.scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平 ...
- html select滚动轴,javascript - html select scroll bar - Stack Overflow
how do you add a scroll bar to the html select box? is there any javascript library that emulate thi ...
- JavaFX UI控件教程(十)之Scroll Bar
翻译自 Scroll Bar 本章介绍如何使用滚动条控件创建可滚动窗格. 本ScrollBar类可以在应用程序中创建滚动窗格和意见.图9-1显示了滚动条的三个区域:拇指,右侧和左侧按钮(或向下和向 ...
- Selenium - IWebDriver 控制scroll bar到底部
有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助js是来进行操作.一般用到操作滚动条的会两个场景: 注册时的法律条文需要阅读,判断用户是否阅读的标准是:滚动条是否拉 ...
最新文章
- 计算机术语表达祝福,考研祝福| | 计算机 愿你们历经千帆,终达彼岸
- 电气:通过转移因子算法求解潮流
- datatable数据类型方法
- 电影:『新警察故事』
- php 备份数据库 Backup Your MySQL Database Using PHP
- ps图片如何实现渐变
- 如何远程调试zookeeper集群
- 未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译。
- Android 用代码Ping网络
- java探索之native方法源码实现
- OSAL工作机制分析
- 颜值评分,图像识别,植物、动物、车型、菜品、logo识别
- 天狼星网络验证源码/官方正版/内附搭建教程
- vmware共享文件夹不显示
- 北京周末去哪儿 —— 国家博物馆
- android 电容屏多点触控协议
- Junit-对涉及数据库操作的服务进行单元测试
- 【UE4教程】Unreal 4.22 UI显示指定物体-实时渲染
- php实现仿淘票票订票网站
- -5.5V~-1.4V,DC-DC电源芯片,电荷泵芯片,负压芯片。负压稳定,纹波小,电路简单。