divシミュレーションスクロールバーエフェクトサンプルコード

コードをコピー コードは次のとおりです: * { margin: 0; padding: 0; } { height: 1000px; } #mainBox { width: 250px; height: 500px; border: 1px #bbb solid; position: relative; overflow: hidden; margin: 50px auto; } #content { height:1000px; position: absolute; left: 0; top: 0; } .scrollDiv { width: 6px; position: absolute; top: 0; background: #666; border-radius: 10px; } /* 章节类别 */ .m-catr{padding:15px 0 10px 12px;*padding:15px 0 10px 14px;} .m-catr .tte{float:left; line-height:35px; text-align:left;font-size:14px; font-weight:bold; color:#5b98db;} #content dl{width:225px; float:left; margin-top:10px;} #content dl dt, .m-catr dl dd{float:left;width:100%; line-height:25px; text-align:left; color:#444;} #content dl dt{font-weight:bold;} #content dl dd{margin-left:12px;} 章节类别 第一单元科学是系统化了的知识 1、千篇一律与千变万化 2、双语言时代 3、人们如何做出决策 4、培养独立工作和独立思考的人 第二单元科学是系统化了的知识 1、千篇一律与千变万化 2、双语言时代 3、人们如何做出决策 4、培养独立工作和独立思考的人 第三单元科学是系统化了的知识 1、千篇一律与千变万化 2、双语言时代 3、人们如何做出决策 4、培养独立工作和独立思考的人 第四单元科学是系统化了的知识 1、千篇一律与千变万化 2、双语言时代 3、人们如何做出决策 4、培养独立工作和独立思考的人 第五单元科学是系统化了的知识 1、千篇一律与千变万化 2、双语言时代 3、人们如何做出决策 4、培养独立工作和独立思考的人 var doc = ドキュメント; var _wheelData = -1; var mainBox = doc.getElementById('mainBox'); function binding(obj, type, handler) { var node = typeof obj == "string" ? $(obj) : オブジェクト; if (node.addEventListener) { node.addEventListener(type, handler, false); } else if (node.attachEvent) { node.attachEvent('on' type, handler); } else { node['on' type] = ハンドラー; } } function MouseWheel(obj, handler) { var node = typeof obj == "string" ? $(obj) : オブジェクト; bind(node, 'mousewheel', function (event) { var data = -getWheelData(event); handler(data); if (document.all) { window .event.returnValue = false; } else { event.preventDefault() } }); //火狐 bind(node, 'DOMMouseScroll', function (event) { var data = getWheelData(event); handler(data); event.preventDefault(); }); function getWheelData(event) { var e = イベント ||ウィンドウ.イベント; e.wheelDelta を返す ? e.wheelDelta : e.detail * 40; } } function addScroll() { this.init.apply(this, argument); } addScroll.prototype = { init: function (mainBox, contentBox, className) { var mainBox = doc.getElementById(mainBox); var contentBox = doc.getElementById(contentBox); varscrollDiv = this._createScroll(mainBox, className); this._resizeScorll(scrollDiv, mainBox, contentBox); this._tragScroll(scrollDiv, mainBox, contentBox); this._wheelChange(scrollDiv, mainBox, contentBox); this._clickScroll(scrollDiv, mainBox, contentBox); }, //创建滚动条 _createScroll: function (mainBox, className) { var _scrollBox = doc.createElement('div'); _scrollBox.setAttribute("id", "scrollBox"); var _scroll = doc.createElement('div'); varspan = doc.createElement('span'); _scrollBox.appendChild(_scroll); _scroll.appendChild(スパン); _scroll.className = クラス名; mainBox.appendChild(_scrollBox); return _scroll; }, //调整滚动条 _resizeScorll: function (element, mainBox, contentBox) { var p = element.parentNode; var conHeight = contentBox.offsetHeight; var _width = mainBox.clientWidth; var _height = mainBox.clientHeight; var _scrollWidth = element.offsetWidth; var _left = _width - _scrollWidth; p.style.width = _scrollWidth "px"; p.style.height = _height "px"; p.style.left = _left "px"; p.style.position = "絶対"; p.style.background = "#ccc"; contentBox.style.width = (mainBox.offsetWidth - _scrollWidth) "px"; var _scrollHeight = parseInt(_height * (_height / conHeight)); if (_scrollHeight >= mainBox.clientHeight) { element.parentNode.style.display = "none"; } element.style.height = _scrollHeight "px"; }, //拖アニメーション滚动条 _tragScroll: function (element, mainBox, contentBox) { var mainHeight = mainBox.clientHeight; element.onmousedown = function (event) { var _this = this; var _scrollTop = element.offsetTop; var e = イベント ||ウィンドウ.イベント; var top = e.clientY; //this.onmousemove=scrollGo; document.onmousemove =scrollGo; document.onmouseup = function (event) { this.onmousemove = null; } functionscrollGo(event) { var e = events ||ウィンドウ.イベント; var _top = e.clientY; var _t = _top - トップ _scrollTop; if (_t > (mainHeight - element.offsetHeight)) { _t = mainHeight - element.offsetHeight; } if (_t _t = 0; } element.style.top = _t "px"; contentBox.style.top = -_t * (contentBox.offsetHeight / mainBox.offsetHeight) "px"; _wheelData = _t; } } element.onmouseover = function () { this.style.background = "#444"; } element.onmouseout = function () { this.style.background = "#666"; } }, //ネズミ标滚轮滚動，滚アニメーション条滚動 _wheelChange: function (element, mainBox, contentBox) { var node = typeof mainBox == "string" ? $(mainBox) : mainBox; var flag = 0、rate = 0、wheelFlag = 0; if (ノード) { mouseWheel(node, function (data) { wheelFlag = データ; if (_wheelData >= 0) { flag = _wheelData; 要素.style.top = flag "px"; wheelFlag = _wheelData = -1; } else { flag = WheelFlag / 12; (フラグ フラグ = 0; wheelFlag = 0; if (フラグ >= (mainBox.offsetHeight - element.offsetHeight)) { フラグ= (mainBox.clientHeight - element.offsetHeight); wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12; } element.style.top = flag "px"; 🎜>contentBox.style.top = -flag * (contentBox.offsetHeight / mainBox.offsetHeight) "px" }); } }, _clickScroll: function (element, mainBox, contentBox) { var p = element.parentNode; p.onclick = 関数 (イベント) { var e = イベント ||ウィンドウ.イベント; var t = e.target || e.src要素; var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop : document.body.scrollTop; var top = mainBox.offsetTop; var _top = e.clientY stop - トップ - element.offsetHeight / 2; if (_top _top = 0; } if (_top >= (mainBox.clientHeight - element.offsetHeight)) { _top = mainBox.clientHeight - element.offsetHeight; } if (t != 要素) { element.style.top = _top "px"; contentBox.style.top = -_top * (contentBox.offsetHeight / mainBox.offsetHeight) "px"; _wheelData = _top; } } } } new addScroll('mainBox', 'content', 'scrollDiv'); $(function () { $("#scrollBox").hide(); $("#mainBox").mouseover(function () { $("#scrollBox").show(); }).mouseout(function () { $("#scrollBox").hide() ; });

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

divシミュレーションスクロールバーエフェクトサンプルコード_javascriptスキル