<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="styleSheet" href="base.css"/>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<style>
#wrapper{width:300px;background: #ff0;position:fixed;right:10px;top:20px;bottom:0;color:#fff;}
#wrapper{*height:100%;}
.box{overflow: hidden;position: relative;height:100%;}
.box ul{height:1200px;background:#006600;border:1px solid #FABE28;}
.fakebar{position:absolute;top:0;right:5px;height:50%;width:15px;background:#ccc;opacity:0.5;
border-radius:8px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box">
<ul>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
<li>啊啊飞ffe</li>
<li>试试方法</li>
</ul>
<div class="fakebar"></div>
</div>
</div>
<script>
var $ = jQuery;
var boxEl = $(".box").get(0);
var $ulEl = $(".box ul");
var $barEl = $(".fakebar");
var hiddenH = 0;
var spaceH = 0;
var h0 = 0;
var h1 = 0;
var step = 20;
var barStep = 0;
function scrollFunc(e){
if(e.wheelDelta){
//W3C 向上120/向下-120,opera 在V9.5之前的取值是反的。
return window.opera && window.opera.ver < 9.5 ? -e.wheelDelta:e.wheelDelta;
}else if(e.detail){
// firefox : 向上-3/向下3
return e.detail * -40;
}
}
function bindMousewheel(el,fn){
var callback = function(e){
fn(scrollFunc(e));
};
if(document.addEventListener){//W3C
el.addEventListener('DOMMouseScroll',callback,false);//firefox
el.addEventListener('mousewheel',callback,false);//IE8+,Opera,Chrome
}else if(document.attachEvent){
el.attachEvent('onmousewheel',callback);
}
}
function computeStep(){
h0 = 0;
h1 = 0;
//滚动条高度
var barH = parseInt($barEl.height(),10);
//滚动条的空白高度
spaceH = boxEl.clientHeight - barH;
//内容被hidden的高度
hiddenH = boxEl.scrollHeight - boxEl.clientHeight;
//计算滚动条的步长
barStep = spaceH/(hiddenH/step);
}
function scrollPos(delta){
if(delta === -120){ //向下滚动
h0 += step;
h0 = Math.min(h0,hiddenH);
h1 += barStep;
h1 = Math.min(h1,spaceH);
}else{//向上滚动
h0 -= step;
h0 = Math.max(h0,0);
h1 -= barStep;
h1 = Math.max(h1,0);
}
$ulEl.css("marginTop",-h0);
$barEl.css("top",h1);
}
jQuery(function(){
$(window).resize(function(){
computeStep();
//简单重置偏移。最好能优化一下，保留当前位置
$ulEl.css("marginTop",0);
$barEl.css("top",0);
});
computeStep();
bindMousewheel(boxEl,scrollPos);
});
</script>
</body>
</html>
- 大小: 40.9 KB
分享到：
相关推荐
在网页设计中，有时我们可能需要自定义或模拟滚动条以增强用户体验或配合特定的设计风格。JavaScript（简称JS）提供了一种方式来实现这一功能，让我们深入探讨一下如何使用JavaScript来模拟滚动条。 首先，我们需要...
总之，通过JavaScript模拟滚动条，我们可以实现跨浏览器的个性化滚动体验，同时结合CSS3的样式定制，可以创造出符合网站设计风格的独特滚动条，提升用户体验。不过，需要注意的是，过度复杂的滚动条可能会影响页面...
"很好的jq模拟滚动条"是一个专门针对jQuery库开发的插件，它提供了一种自定义和美化滚动条的方法，以增强网页的视觉效果和用户体验。 jQuery，简称jq，是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历...
本主题聚焦于"jQuery实现模拟滚动条插件版"，这是一个能够自定义网页滚动条外观和行为的工具。通过使用这样的插件，开发者可以为网站提供更加个性化和一致的用户体验。 首先，我们需要理解jQuery的基本用法。jQuery...
为了模拟滚动条，我们创建了一个名为`#content`的div，其高度设置为1000px，它包含着所有章节内容，由于其父元素的高度限制，内容会超出可视区域，从而需要滚动查看。 滚动条的样式通过`.scrollDiv`类定义，这是一...
JavaScript 模拟滚动条是一种常见的前端技术，它允许开发者在网页上创建自定义的滚动交互效果，以替代浏览器默认的滚动条。这种技术通常用于增强用户体验，提供更丰富的视觉效果和交互性。以下是对这个主题的详细...
09-模拟滚动条.html
04-模拟滚动条.html
11-模拟滚动条.html
10-模拟滚动条.html
simScroll插件使用图片模拟滚动条，个人觉得从功能上来说已接近完美了，不过还是有点东西要完善的。就目前来说它支持的功能有： 1、上下按钮、滚动区域，支持切换快速滚动;遗憾的地方：滚动区域翻页滚动时，当...
### JS模拟滚动条（横向与纵向）实现原理与关键技术点 #### 一、概述 在Web开发中，自定义滚动条是一种常见的需求，特别是在需要增强用户体验或者满足特定设计风格的情况下。本文将详细介绍如何使用JavaScript来...
应一个朋友之邀，他说用vb的时间空间来控制一个滚动条的增长...本程序没有使用MFC，倒是十分简单，就是设置一个timer，然后定时处理“滚动条”，我也没有使用真正的滚动条，而是根据朋友的要求，自己用矩形模拟了一个。
这是由于IE浏览器的一个已知问题，它对模拟滚动条的最小宽度有一定的限制。在某些版本的IE中，滚动条需要至少17像素的宽度才能正常工作。在示例中，17像素宽的`div`可能没有足够的空间来显示并操作滚动条，导致滚动...
在本文中，我们将深入探讨如何使用JavaScript来创建一个自定义的、兼容IE6及更高版本的模拟滚动条，以及如何通过个性化定制实现更酷炫的滚动效果。标题和描述提到的"scroll"项目是一个轻量级（只有2KB）的解决方案，...
系统默认的滚动条很丑，用这个可以自己换成图片等。 主要事件： 上、下按钮按住，内容慢慢滚动。 拖动滚动条，内容快速滚动。 点击滚动条空闲位置，内容定位。 鼠标滚轮在内容中滚动时，内容滚动。 代码未整理，...
在C#编程中，滚动条（ScrollBar）控件是一个常用元素，它允许用户通过滚动查看大量数据或在大型用户界面中导航。这个“C#180滚动条示例 源代码”压缩包可能包含了关于如何在Windows Forms或WPF应用中实现滚动条功能...