除了上下两个箭头以外，滚动条和一般的浏览器基本差不多
html结构很简单，mainBox是外层div，content是内容，滚动条div是js动态生成的.
<div id="mainBox">
<div id="content"></div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div模拟的自定义滚动条</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p {
height: 1000px;
}
#mainBox {
width: 400px;
height: 500px;
border: 1px #bbb solid;
position: relative;
overflow: hidden;
margin: 50px auto;
}
#content {
height: 2500px;
position: absolute;
left: 0;
top: 0;
background:url(img/scrollTest.jpg);
}
.scrollDiv {
width: 18px;
position: absolute;
top: 0;
background: #666;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="mainBox">
<div id="content"></div>
</div>
<p></p>
<script type="text/javascript">
var doc = document;
var _wheelData = -1;
var mainBox = doc.getElementById('mainBox');
function bind(obj, type, handler) {
var node = typeof obj == "string" ? $(obj) : obj;
if (node.addEventListener) {
node.addEventListener(type, handler, false);
} else if (node.attachEvent) {
node.attachEvent('on' + type, handler);
} else {
node['on' + type] = handler;
}
}
function mouseWheel(obj, handler) {
var node = typeof obj == "string" ? $(obj) : obj;
bind(node, 'mousewheel', function(event) {
var data = -getWheelData(event);
handler(data);
if (document.all) {
window.event.returnValue = false;
} else {
event.preventDefault();
}
});
//火狐
bind(node, 'DOMMouseScroll', function(event) {
var data = getWheelData(event);
handler(data);
event.preventDefault();
});
function getWheelData(event) {
var e = event || window.event;
return e.wheelDelta ? e.wheelDelta : e.detail * 40;
}
}
function addScroll() {
this.init.apply(this, arguments);
}
addScroll.prototype = {
init : function(mainBox, contentBox, className) {
var mainBox = doc.getElementById(mainBox);
var contentBox = doc.getElementById(contentBox);
var scrollDiv = this._createScroll(mainBox, className);
this._resizeScorll(scrollDiv, mainBox, contentBox);
this._tragScroll(scrollDiv, mainBox, contentBox);
this._wheelChange(scrollDiv, mainBox, contentBox);
this._clickScroll(scrollDiv, mainBox, contentBox);
},
//创建滚动条
_createScroll : function(mainBox, className) {
var _scrollBox = doc.createElement('div')
var _scroll = doc.createElement('div');
var span = doc.createElement('span');
_scrollBox.appendChild(_scroll);
_scroll.appendChild(span);
_scroll.className = className;
mainBox.appendChild(_scrollBox);
return _scroll;
},
//调整滚动条
_resizeScorll : function(element, mainBox, contentBox) {
var p = element.parentNode;
var conHeight = contentBox.offsetHeight;
var _width = mainBox.clientWidth;
var _height = mainBox.clientHeight;
var _scrollWidth = element.offsetWidth;
var _left = _width - _scrollWidth;
p.style.width = _scrollWidth + "px";
p.style.height = _height + "px";
p.style.left = _left + "px";
p.style.position = "absolute";
p.style.background = "#ccc";
contentBox.style.width = (mainBox.offsetWidth - _scrollWidth)
+ "px";
var _scrollHeight = parseInt(_height * (_height / conHeight));
if (_scrollHeight >= mainBox.clientHeight) {
element.parentNode.style.display = "none";
}
element.style.height = _scrollHeight + "px";
},
//拖动滚动条
_tragScroll : function(element, mainBox, contentBox) {
var mainHeight = mainBox.clientHeight;
element.onmousedown = function(event) {
var _this = this;
var _scrollTop = element.offsetTop;
var e = event || window.event;
var top = e.clientY;
//this.onmousemove=scrollGo;
document.onmousemove = scrollGo;
document.onmouseup = function(event) {
this.onmousemove = null;
}
function scrollGo(event) {
var e = event || window.event;
var _top = e.clientY;
var _t = _top - top + _scrollTop;
if (_t > (mainHeight - element.offsetHeight)) {
_t = mainHeight - element.offsetHeight;
}
if (_t <= 0) {
_t = 0;
}
element.style.top = _t + "px";
contentBox.style.top = -_t
* (contentBox.offsetHeight / mainBox.offsetHeight)
+ "px";
_wheelData = _t;
}
}
element.onmouseover = function() {
this.style.background = "#444";
}
element.onmouseout = function() {
this.style.background = "#666";
}
},
//鼠标滚轮滚动，滚动条滚动
_wheelChange : function(element, mainBox, contentBox) {
var node = typeof mainBox == "string" ? $(mainBox) : mainBox;
var flag = 0, rate = 0, wheelFlag = 0;
if (node) {
mouseWheel(
node,
function(data) {
wheelFlag += data;
if (_wheelData >= 0) {
flag = _wheelData;
element.style.top = flag + "px";
wheelFlag = _wheelData * 12;
_wheelData = -1;
} else {
flag = wheelFlag / 12;
}
if (flag <= 0) {
flag = 0;
wheelFlag = 0;
}
if (flag >= (mainBox.offsetHeight - element.offsetHeight)) {
flag = (mainBox.clientHeight - element.offsetHeight);
wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12;
}
element.style.top = flag + "px";
contentBox.style.top = -flag
* (contentBox.offsetHeight / mainBox.offsetHeight)
+ "px";
});
}
},
_clickScroll : function(element, mainBox, contentBox) {
var p = element.parentNode;
p.onclick = function(event) {
var e = event || window.event;
var t = e.target || e.srcElement;
var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop
: document.body.scrollTop;
var top = mainBox.offsetTop;
var _top = e.clientY + sTop - top - element.offsetHeight
/ 2;
if (_top <= 0) {
_top = 0;
}
if (_top >= (mainBox.clientHeight - element.offsetHeight)) {
_top = mainBox.clientHeight - element.offsetHeight;
}
if (t != element) {
element.style.top = _top + "px";
contentBox.style.top = -_top
* (contentBox.offsetHeight / mainBox.offsetHeight)
+ "px";
_wheelData = _top;
}
}
}
}
new addScroll('mainBox', 'content', 'scrollDiv');
</script>
</body>
</html>
- 大小: 132.6 KB
- 大小: 397 KB
分享到：
相关推荐
### 自定义滚动条知识点 #### 一、概念与应用场景 自定义滚动条是前端开发中一个常见的需求。在默认情况下，浏览器会为超出容器显示范围的内容自动添加滚动条。但这些滚动条样式单一且功能简单，无法满足某些设计...
本文将深入探讨如何使用JavaScript来模拟自定义滚动条，让你的网页滚动体验更加个性化和绚丽。 首先，了解原生浏览器的滚动条。在大多数现代浏览器中，系统默认的滚动条设计通常是简洁但相对单调的。为了改变这一...
在网页设计中，有时我们需要自定义滚动条的样式以使其更符合网站的整体风格。这个例子展示了如何使用HTML和CSS来模拟一个由div元素创建的滚动条效果。通过这种方式，我们可以控制滚动条的颜色、形状和位置，使其更加...
4. **自定义滚动条**：在HTML中创建自定义滚动条的元素，如`<div class="custom-scrollbar"></div>`，然后使用CSS定义其样式和位置。JavaScript则负责根据实际滚动位置调整这个元素的位置。 5. **动画效果**：为了...
此外，对于自定义滚动条，由于其主要依赖Webkit内核的CSS扩展，所以非Webkit浏览器（如IE）可能需要额外的JavaScript库来实现类似效果。 5. **性能优化：** 当数据量较大时，一次性加载所有数据可能会导致页面加载...
本文将介绍两种使用div和jQuery自定义滚动条样式的常用方法。 首先，要生成滚动条，通常需要在需要滚动的div元素上设置CSS属性`overflow-x`和`overflow-y`为`auto`。例如，对于左边的菜单项div，我们可以这样设置：...
使用 JavaScript 实现自定义浏览器滚动条的思路是模拟浏览器自身的滚动条。我们可以将整个文档放在一个容器里面，然后通过转变容器里面的 div 的 top 值来实现滚动效果。 例如，我们可以使用以下 HTML 结构： ``` ...
在网页设计中，有时我们需要对特定的`div`元素实现自定义滚动条的效果，以便增强用户体验。本项目提供了一个JavaScript版本的解决方案，该方案最初基于jQuery实现，经过修改后适用于纯JavaScript环境，解决了在IE8...
这些库可以自定义滚动条样式，并通常能处理不同浏览器的兼容性问题。 总的来说，解决IE浏览器中宽度小于18像素的`div`滚动条不滚动的问题，可以通过调整`div`宽度、使用CSS hack或引入第三方库来实现。在进行网页...
在当前的网络应用中，自定义滚动条效果已经成为一种增强用户体验的手段。使用原生JavaScript实现自定义滚动条涉及到DOM操作、事件处理、CSS布局和样式定义等多个方面的技术。本文将详细介绍如何通过原生JavaScript...
通过加载jQuery库和mousescroll.js插件，一个带有自定义滚动条的div元素被创建。滚动条的样式可以通过检查HTML和CSS代码来观察和学习。 总结，jQuery+mousescroll.js插件为开发者提供了一种方便、灵活的方式来美化...
JavaScript模拟滚动条是通过监听滚动事件、计算元素的可视区域与总内容的关系，然后手动更新和控制一个自定义滚动条的样式和位置。这通常涉及到CSS定位（positioning）和尺寸计算（dimensions calculation）。 2. ...
本文将介绍如何使用JavaScript实现自定义滚动条效果。滚动条通常由浏览器默认样式提供，但通过CSS和JavaScript，我们可以对其进行自定义，使其更加美观且符合设计需求。 首先，我们需要在HTML中设置一个容器来模拟...
2. 创建自定义滚动条：利用HTML和CSS创建滚动条的外观，可以是任何元素，如`div`或`span`。 3. 添加滚动事件：通过JavaScript监听滚动事件，如`onscroll`，根据滚动位置更新自定义滚动条的位置。 4. 实现滚动功能：...
HTML部分包含一个主容器`#div1`，内部有两个子元素：实际内容的容器`#div2`和自定义滚动条`#div3`。`#div1`设置为相对定位，以允许其子元素进行绝对定位。`#div2`内容超出其高度，从而触发滚动需求。`#div3`作为...
在这种情况下，"ttScrollBar.js"可能就是这样一个插件，用于在div元素中实现自定义滚动条效果。 "ttScrollBar.js"可能的工作原理是监听滚动事件，然后用CSS类或绝对定位来模拟滚动条。它可能提供了一系列API，允许...
在给出的代码示例中，通过CSS类`.dumascroll`的应用，可以轻松地为指定的div添加自定义滚动条效果。`.dumascroll_area`、`.dumascroll_bar`、`.dumascroll_handle`等相关类用于定义滚动条的各个部分的样式，确保了...
在网页设计中，为了增强用户体验和个性化，有时我们会选择自定义滚动条的样式，将传统的浏览器默认滚动条替换为更具视觉吸引力的图片或图形元素。本文将深入探讨如何使用代码实现这一功能，主要关注HTML、CSS以及...
在本文中，我们将深入探讨如何使用JavaScript来实现自定义滚动条。滚动条是网页界面中的一个常见元素，它允许用户浏览超出可视区域的内容。默认情况下，浏览器提供的滚动条样式有限，但通过JavaScript，我们可以创建...