JS simulated simple scroll bar effect code (with demo source code) _ javascript tips-js tutorial

This article mainly introduces JavaScript code for simulating the simple scroll bar effect, which can simulate the scroll bar drag display effect. It involves JavaScript mouse event response and page element operation related skills, the demo source code is provided for readers to download. If you need it, you can refer to the example in this article to illustrate how to simulate the simple scroll bar effect in JS. We will share this with you for your reference. The details are as follows:

Use Js to simulate the scroll bar. Simple mode, similar to the common scroll bars on mobile phones.

The effect is as follows:

The Js Code is as follows:

Var scrollMoveObj = null, scrollPageY = 0, scrollY = 0; var scrollDivList = new Array (); // obj: the name of the scroll bar style of the object w. Scroll Bar Width className. // The height must be specified for the obj element and overflow: hidden must be set; // to be compatible with IE6, overflow: hidden must be specified for the obj element; function jsScroll (obj, w, className) {if (typeof (obj) = 'string ') {obj = document. getElementById (obj);} // when the content does not exceed the current height, no scroll bar is added if (! Obj | obj. scrollHeight <= obj. clientHeight | obj. clientHeight = 0) {return;} obj. scrollBarWidth = w | 6; obj. style. overflow = 'did'; obj. scrollBar = document. createElement ('P'); document. body. appendChild (obj. scrollBar); obj. scrollBarIndex = document. createElement ('P'); obj. scrollBar. appendChild (obj. scrollBarIndex); obj. scrollBar. style. position = 'absolute '; obj. scrollBarIndex. style. position = 'Absolute '; obj. scrollBar. className = className | ''; if (! ClassName) {obj. scrollBar. style. backgroundColor = '# ddd'; obj. scrollBarIndex. style. backgroundColor = '# aaa';} scrollDivList. push (obj); scrollResetSize (obj); // scroll obj with the mouse wheel. scrollBar. scrollDiv = obj; obj. scrollBarIndex. scrollDiv = obj; obj. onmousewheel = scrollMove; obj. scrollBar. onmousewheel = scrollMove; obj. scrollBarIndex. onmousewheel = scrollMove; // drag the scroll bar to scroll obj. scrollBarIndex. onmousedown = function (evt) {evt = evt | event; scrollPageY = evt. clientY; scrollY = this. scrollDiv. scrollTop; isScrollMove = true; document. body. onselectstart = function () {return false}; scrollMoveObj = this. scrollDiv; if (this. scrollDiv. scrollBar. className = '') {this. scrollDiv. scrollBarIndex. style. backgroundColor = '#888';} return false ;}// when the page size changes, recalculate the position window of the scroll bar. onresize = function () {for (var I = 0; I
 
  
= (P. scrollHeight-p. clientHeight) return true; p. scrollTop + = step;} else {if (p. scrollTop = 0) return true; p. scrollTop-= step;} setScrollPosition (p); return false ;}
 

Click here to download the complete instance code.