<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> manual scrolling </title>
<Style type = "text/CSS">
# Mybox {
Overflow: hidden;
Background: # CCC;
Height: 100px;
Width: 200px;
}
. Up,. down {Background: # 63f; width: 200px ;}
</Style>
<SCRIPT type = "text/JavaScript" src = "jquery-1.3.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
VaR mytimer;
// The smaller the speed in milliseconds, the faster the speed.
VaR speed = 200;
// The greater the value, the faster it is.
VaR stepspeed = 4;
$ (Function (){
VaR mybox = $ ("# mybox ");
// Up
$ (". Up"). BIND ("Mouseover", function (){
VaR nowpos = mybox [0]. scrolltop; // Current Value
Changepos (mybox, nowpos, 0 );
}). BIND ("mouseout", function (){
If (mytimer) {window. clearinterval (mytimer );}
});
// Downward
$ (". Down"). BIND ("Mouseover", function (){
VaR nowpos = mybox [0]. scrolltop; // Current Value
VaR maxpos = mybox [0]. scrollheight; // maximum value
Changepos (mybox, nowpos, maxpos );
}). BIND ("mouseout", function (){
If (mytimer) {window. clearinterval (mytimer );}
});
});
Function changepos (box, from, ){
If (mytimer) {window. clearinterval (mytimer );}
VaR temstepspeed = stepspeed;
If (from> ){
Mytimer = Window. setinterval (function (){
If (Box [0]. scrolltop>)
{Box [0]. scrolltop-= (5 + temstepspeed );}
Else {window. clearinterval (mytimer );}
}, Speed );
} Else if (from <){
Mytimer = Window. setinterval (function (){
If (Box [0]. scrolltop <)
{Box [0]. scrolltop + = (5 + temstepspeed );}
Else {window. clearinterval (mytimer );}
}, Speed );
}
}
</SCRIPT>
</Head>
<Body>
<Div class = "up"> up </div>
<Div id = "mybox">
Test content test content test content test content test content test content
</Div>
<Div class = "down"> down </div>
</Body>
</Html>
Main Implementation ideas:
Fixed the width and height of the DIV, set CSS overflow: hidden, and then use the JS Code to modify the scrolltop value of the DIV to implement scrolling.
The total height of the element content (if no scroll bar is set, the height of the content can be expanded) element. scrollheight
Document. Body. scrolltop | document.doc umentelement. scrolltop
Total element content width (if no scroll bar is set, the content can be expanded) element. scrollwidth
The left pixel document. Body. scrollleft to which the volume has been rolled | document.doc umentelement. scrollleft
Other functions that can be implemented based on these features:
Auto-scroll, image-scroll, and so on. This is a scroll up or down, so there should be no problems with the implementation of the left and right scrolling.
Original post address: http://bbs.chinaunix.net/thread-2297953-1-1.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
