<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>自定义滚动条</title>
<link rel="stylesheet" href="">
<style type="text/css">
#warpper {
width: 500px;
height: 300px;
margin: 200px;
position: relative;
}
#contentWrapper{
width: 480px;
height: 300px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#content {
width: 480px;
height: auto;
position: absolute;
top: 0;
left: 0;
line-height: 30px;
}
#scrollbarp {
width: 20px;
background-color: blue;
height: 300px;
position: absolute;
right: 0;
top: 0;
}
#scrollbar {
width: 20px;
background-color: red;
height: 30px;
position: absolute;
top: 0px;
right: 0px;
cursor: hand;
}
</style>
<script type="text/javascript">
window.onload = function() {
var content = document.getElementById("content");
var scrollbar = document.getElementById("scrollbar");
var scrollbarp = document.getElementById("scrollbarp");
var wrapper = document.getElementById("warpper");
// contentMaxT--包裹内容的div最大的top值
var contentMaxT = content.offsetHeight-contentWrapper.offsetHeight;
var TMax = scrollbarp.offsetHeight - scrollbar.offsetHeight;
scrollbar.onmousedown = function(e) {
//记录鼠标的位置，滚动条当前的top
var e = e || window.event;
/***
鼠标按下的时候,记录Y轴偏移距离
这个距离是一个比较的偏移位置
当鼠标滑动的时候鼠标变化的位置，减去鼠标按下的时候
记录的偏移位置，就是滚动条要移动的位置
***/
var disY = e.clientY - this.offsetTop;
console.log("down: disY : "+disY+" cy: "+e.clientY+"-----top： "+this.offsetTop);
if(scrollbar.setCapture){
scrollbar.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || window.event;
var T = ev.clientY - disY;
fixTop(T);
return false;
}
document.onmouseup = function() {
document.onmouseup = document.onmousemove = null;
if(scrollbar.releaseCapture){
scrollbar.releaseCapture();
}
}
return false;
}
function fixTop(T){
console.log("T ;;;;: "+T);
if (T < 0) {
T = 0;
}
if (T > TMax) {
T = TMax;
}
var scale = T / TMax;
content.style.top = -scale * contentMaxT+"px";
scrollbar.style.top = T + "px";
}
//当鼠标移入的时候对包裹的内容进行鼠标滚轮事件监听,每次加三个像素
wrapper.onmouseover = function(e){
var e = e || window.event;
// e.stopPropgation?e.stopPropgation():e.cancleBubble = true;
//对内容添加鼠标滚轮事件window.onmousewheel=document.onmousewheel
if((window.navigator.userAgent).indexOf("Firefox")>-1){
console.log("火狐");
wrapper.addEventListener("DOMMouseScroll",fixScroll,false);
}else{
console.log("非火狐");
wrapper.focus();//IE下有时候获取焦点有问题，这个修复
wrapper.onmousewheel= fixScroll;
}
//火狐浏览器是添加DOMMouseScroll事件--e.detail 3
wrapper.onmouseout = function(){
wrapper.onmouseout = wrapper.onmousewheel = null;
if((window.navigator.userAgent).indexOf("Firefox")>-1){
wrapper.removeEventListener("DOMMouseScroll",fixScroll,false);}
}
return false;
}
function fixScroll(e){
var e = e || window.event;
var value = e.wheelDelta?e.wheelDelta:-(e.detail);
console.log("事件监听 value: "+value);
e.preventDefault?e.preventDefault():e.returnValue = false;
e.stopPropgation?e.stopPropgation():e.cancleBubble = true;
var stylesTop = scrollbar.currentStyle?scrollbar.currentStyle["top"]:document.defaultView.getComputedStyle(scrollbar,null)["top"];
var myT = parseFloat(stylesTop);
value>0?(myT-=30):(myT+=30);
fixTop(myT);
}
}
</script>
</head>
<body>
<div id="warpper">
<span id="contentWrapper">
<span id="content">
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
</span>
</span>
<span id="scrollbarp">
<span id="scrollbar"></span>
</span>
</div>
</body>
</html>
分享到：
相关推荐
总结起来，"利用div+jquery自定义滚动条"涉及到的关键知识点包括：HTML的`div`元素，CSS的`overflow`属性，jQuery的选择器和方法，以及自定义滚动条的插件和CSS样式。通过学习和实践这些技术，你可以创建出与网站...
【标题】"js+css3曲线循环菜单滚动切换特效"是一种网页设计技术，结合JavaScript（js）和CSS3的强大功能，创造出引人注目的交互式用户体验。这种特效主要用于网站的导航菜单，使得用户在浏览时能以独特的曲线形状和...
在实际使用过程中，JS自定义滚动条插件的实现步骤通常包括以下几个部分： 1. **引入资源**：将插件的CSS和JavaScript文件引入到HTML页面中，确保在页面加载时能够访问到这些资源。 2. **初始化插件**：在页面DOM...
本文将深入探讨JS自定义滚动条的相关知识点，包括其原理、实现方式以及常见技巧。 首先，我们需要理解CSS3中的`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等伪元素，它们允许我们对Webkit内核浏览器（如...
JavaScript 自定义滚动条样式是一种常见的前端技术，它允许开发者通过 CSS 和 JavaScript 对浏览器默认的滚动条进行美化和个性化，以提升用户体验和界面设计的一致性。在网页设计中，滚动条往往是不可忽视的一部分，...
请注意，对于非Webkit浏览器，自定义滚动条的样式支持有限。为了保证兼容性，你可以考虑使用JavaScript库或者CSS框架，如Perfect Scrollbar或SimpleBar，它们提供了更广泛的支持和更多的自定义选项。 在实际项目中...
本文将深入探讨如何使用CSS来实现自定义滚动条。 滚动条在网页中通常用于在内容超过可视区域时浏览更多内容。默认情况下，浏览器提供了滚动条的样式，但这些样式可能不符合设计师的视觉要求或品牌形象。因此，CSS...
在网页设计中，滚动条是不可或缺的一部分，尤其是在内容丰富的页面上。...通过合理的样式设置和适时的JavaScript辅助，我们可以创建出既美观又实用的自定义滚动条，使用户在浏览网页时享受更加流畅的体验。
2. **高度可定制化**：你可以自定义滚动条的外观，包括颜色、大小、形状等，甚至可以设置滚动条在鼠标悬停时的效果。此外，还可以调整滚动条的动态效果，如滚动速度、缓动函数等。 3. **易于使用**：...
综上所述，创建基于React的自定义滚动条组件涉及到React组件封装、CSS样式定制、事件监听与处理、状态管理以及跨浏览器兼容性等多个方面。通过深入理解这些知识点，我们可以构建出既美观又功能完备的自定义滚动条...
为了实现跨浏览器的自定义滚动条，我们可以借助第三方库，例如`simple-scrollbar`或`perfect-scrollbar`。这些库通过JavaScript实现滚动条的自定义，并且已经处理了浏览器兼容性问题。以`simple-scrollbar`为例，...
**jQuery自定义滚动条插件**是一种用于增强网页滚动体验的工具，尤其在现代Web设计中，为了提供更美观和个性化的界面，自定义滚动条变得越来越重要。本插件适用于IE8及以上的浏览器，允许开发者对滚动条的外观和行为...
例如，你可以用JS来监听用户的滚动事件，动态加载更多数据；或者使用定时器更新图表，展示实时变化的数据。 Echarts是一个基于JavaScript的开源可视化库，它支持丰富的图表类型，包括柱状图、折线图、饼图、热力图...
### 自定义滚动条知识点 #### 一、概念与应用场景 自定义滚动条是前端开发中一个常见的需求。在默认情况下，浏览器会为超出容器显示范围的内容自动添加滚动条。但这些滚动条样式单一且功能简单，无法满足某些设计...
"自定义滚动条 scroll js滚动条"就是这样一个主题，它涉及到JavaScript库，如jQuery和jScroll，以及图像资源的使用，来实现滚动条的个性化效果。 首先，jQuery.js是广泛使用的JavaScript库，它简化了DOM操作，事件...
在一些现代浏览器中，CSS已经提供了部分自定义滚动条样式的属性，如`::-webkit-scrollbar`、`::-webkit-scrollbar-track`和`::-webkit-scrollbar-thumb`。但这些CSS选择器仅适用于Webkit内核的浏览器，如Chrome和...
在这个DEMO中，"ttScrollBar.js"很可能包含了实现自定义滚动条逻辑的核心JavaScript代码。这个插件可能通过监听滚动事件，动态改变滚动条的大小、位置和样式，以实现定制化的用户体验。 在CSS方面，我们可以使用伪...
在HTML中添加必要的CSS和JS文件后，可以对需要自定义滚动条的元素使用特定的类名或ID进行选择。例如： ```html <!-- 内容区域 --> ``` 接下来，在JavaScript中初始化插件，设置所需的参数： ```javascript $...
js 自定义滚动条样式 颜色大小在css调节 绑定节点在js代码第一个函数修改
这些库提供了丰富的API和配置选项，不仅允许自定义滚动条样式，还能处理滚动事件和交互逻辑。它们通常通过监听滚动事件，动态创建和更新自定义滚动条元素，从而实现高度的兼容性和定制性。 **4. Accessibility and ...