我的 css 代码：这是用于滚动条视图和条的移动
#updateHolder { /*this describes the outer structure of the scroll bar */
width: 300px; /* <= For Width: change the width value */
color: #333; /***/
margin-top: 10px; /***/
overflow: hidden; /***/
border:0px solid #CCCCCC; /***/
}
#updateContainer { /***/
background-color: white; /***/
position: relative; /***/
cursor: pointer; /***/
}
#updateContent {
background: #fff;
position: absolute;
padding-right: 12px;
}
#updateScollBar { /***/
background: #F2F2F2; /***/
border-left: 1px solid #DADADA; /***/
position: absolute;
width: 10px; /***/
right: 0; /***/
bottom: 0; /***/
cursor: default;
zoom: 1;
filter: alpha(opacity=25); /* For IE8 and earlier */
opacity: 0.25;
}
#updateScollScrubber {
background-color: 909090;
width: 9px;
height: 100px;
position: absolute;
border-left:1px solid #676767;
border-top:1px solid #676767;
}
#updateScollBar, #updateContainer, #updateHolder {
height: 300px; /* <= For Height: change the height value */ }
Javascript代码：虽然我提到它的方式不同，但我已经将它嵌入到我粘贴在它下面的html代码中
$(document).ready(function(){ //This code doesnt enable mouse-scrolling
var _offsetY = 0,
_startY = 0,
scrollStep = 10,
isScrollBarClick = false,
contentDiv,
scrubber,
scrollHeight,
contentHeight,
scrollFaceHeight,
initPosition,
initContentPos,
moveVal,
scrubberY = 0;
element = document.getElementById("updateHolder");
if (element.addEventListener)
/** DOMMouseScroll is for mozilla. */
element.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
element.onmousewheel = document.onmousewheel = wheel;
// To resize the height of the scroll scrubber when scroll height increases.
setScrubberHeight();
contentDiv = document.getElementById('updateContainer');
scrubber = $('#updateScollScrubber');
scrollHeight = $('#updateScollBar').outerHeight();
contentHeight = $('#updateContent').outerHeight();
scrollFaceHeight = scrubber.outerHeight();
initPosition = 0; /***/
initContentPos = $('#updateHolder').offset().top; /***/
// Calculate the movement ration with content height and scrollbar height
moveVal = (contentHeight - scrollHeight)/(scrollHeight - scrollFaceHeight);
$('#updateHolder').bind('mousewheel', wheel);
$("#updateScollScrubber").mouseover(function() {
// Enable Scrollbar only when the content height is greater then the view port area.
isScrollBarClick = false;
if(contentHeight > scrollHeight) {
// Show scrollbar on mouse over
$(this).animate({opacity: 1});
scrubber.bind("mousedown", onMouseDown);
}
}).mouseout(function() {
isScrollBarClick = false;
if(contentHeight > scrollHeight) {
// Hide Scrollbar on mouse out.
$(this).animate({opacity: 0.25});
$('#updateHolder').unbind("mousemove", onMouseMove);
scrubber.unbind("mousedown", onMouseDown);
}
});
$("#updateScollBar").mousedown(function(){ /***/
isScrollBarClick = true; /***/
}).mouseout(function(){
isScrollBarClick = false; /***/
}).mouseup(function(event) {
if( isScrollBarClick == false )
return;
if ((event.pageY - initContentPos) > (scrollHeight - scrubber.outerHeight())) {
scrubber.css({top: (scrollHeight - scrubber.outerHeight())});
}else{
scrubber.css({top: (event.pageY - initContentPos) - 5});
}
$('#updateContent').css({top: ((initContentPos - scrubber.offset().top) * moveVal)});
});
function onMouseDown(event) {
$('#updateHolder').bind("mousemove", onMouseMove);
$('#updateHolder').bind("mouseup", onMouseUp);
_offsetY = scrubber.offset().top;
_startY = event.pageY + initContentPos;
// Disable the text selection inside the update area. Otherwise the text will be selected while dragging on the scrollbar.
contentDiv.onselectstart = function () { return false; } // ie
contentDiv.onmousedown = function () { return false; } // mozilla
}
function onMouseMove(event) {
isScrollBarClick = false;
// Checking the upper and bottom limit of the scroll area
if((scrubber.offset().top >= initContentPos) && (scrubber.offset().top (initContentPos + scrollHeight - scrollFaceHeight)) {
scrubber.css({top: (scrollHeight-scrollFaceHeight-2)});
$('#updateContent').css({top: (scrollHeight - contentHeight + initPosition)});
}
$('#updateHolder').trigger('mouseup');
}
}
function onMouseUp(event) {
$('#updateHolder').unbind("mousemove", onMouseMove);
contentDiv.onselectstart = function () { return true; } // ie
contentDiv.onmousedown = function () { return true; } // mozilla
}
function setScrubberHeight() { /***/
cH = $('#updateContent').outerHeight();
sH = $('#updateScollBar').outerHeight();
if(cH > sH) {
// Set the min height of the scroll scrubber to 20
if(sH / ( cH / sH ) < 20) { $('#updateScollScrubber').css({height: 20 }); }else{ $('#updateScollScrubber').css({height: sH / ( cH / sH ) }); } } } function onMouseWheel(dir) { scrubberY = scrubber.offset().top + (scrollStep * dir) - initContentPos; if ((scrubberY) > (scrollHeight - scrubber.outerHeight())) {
scrubber.css({top: (scrollHeight - scrubber.outerHeight())});
}else {
if(scrubberY < 0) scrubberY = 0;
scrubber.css({top: scrubberY});
}
$('#updateContent').css({top: ((initContentPos - scrubber.offset().top) * moveVal)});
}
/** This is high-level function.
* It must react to delta being more/less than zero.
*/
function handle(delta) {
if (delta < 0) {
onMouseWheel(1);
}
else {
onMouseWheel(-1);
}
}
/** Event handler for mouse wheel event. /***/
*/
function wheel(event){ /***/
var delta = 0; /***/
if (!event) /* For IE. */ /***/
event = window.event; /***/
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
if (delta)
handle(delta);
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
} });
HTML代码在这里我不确定，但我认为我在这里犯了一些错误
<link rel="stylesheet" type="text/css" href="Css_file.css" media="screen" />
<div id="updateHolder">
<div id="updateContainer">
<div id="updateContent">
//Placing my content here
Dummy Text <img src="http://articles.tutorboy.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley">
msg
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="updateScollBar">
<div id="updateScollScrubber">
</div>
</div>
</div>
</div>
</body>
</html>
对于糟糕的 html 表示非常抱歉，因为我无法正确表示标签。任何帮助将非常感激。谢谢