我想在鼠標(biāo)按下時獲得scrollTop 值，但是按下后，卻找不到那個元素。
dragStartScrollPosition = self.$cont[0].scrollTop;我認(rèn)為是元素沒有取到，但是檢查過新建的對象，類名是正確的。下面是源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滾動條的實現(xiàn)</title>
<style>
html, body, div, ul, li, p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.clearfix::after {
display: block;
content: ".";
height: 0;
clear: both;
visibility: hidden;
}
body {
background-color: #ccc;
}
.scrollBox {
width: 540px;
margin: 20px auto;
background-color: #fff;
border: 2px solid #e5e5e5;
}
.scroll-tab {
height: 30px;
border: 1px solid #e5e5e5;
color: #666;
background-color: #f8f8f8;
}
.scroll-tab .tab-item {
float: left;
font: 16px/30px "Microsoft YaHei";
line-height: 30px;
padding:0 20px;
}
/* 選中時的背景顏色 */
.scroll-tab .tab-active {
color: #00be3c;
background-color: #fff;
border-top:2px solid #00be3c;
margin: -1px 0;
}
/* 滾動內(nèi)容區(qū) */
.scroll-wrap {
width: 100%;
height: 300px;
position: relative;
}
.scroll-wrap .scroll-cont {
height: 100%;
padding: 0 15px;
overflow: hidden;
}
.scroll-wrap .scroll-cont h3 {
font: 16px/3 "Microsoft YaHei";
text-align: center;
}
.scroll-wrap .scroll-cont p {
font-size: 14px;
line-height: 30px;
text-indent: 2em;
}
/* 寫個滾動條 */
.scroll-bar {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
background-color: #aeaeae;
}
.scroll-bar .scroll-slider {
position: absolute;
top: 0;
left: 1px;
width: 8px;
height: 40px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="scrollBox">
<ul class="scroll-tab">
<!-- 標(biāo)簽切換 -->
<li class="tab-item tab-active">one</li>
<li class="tab-item">two</li>
<li class="tab-item">three</li>
<li class="tab-item">four</li>
</ul>
<!-- 滾動內(nèi)容 -->
<div class="scroll-wrap clearfix">
<!-- 內(nèi)容 -->
<div class="scroll-cont">
<h3>春天來了</h3>
<div class="scroll-ol">
<p>來就來了，關(guān)你什么事。一年之計在于春，春天來了，萬物復(fù)蘇。那一碧千里的小草綠了，像一塊綠色的地毯鋪在大地上；那五彩繽紛、燦爛多姿的花兒像七彩的云朵隨風(fēng)飄游；那壯麗高聳、生機(jī)勃勃的大樹像是被人涂了一層綠油油的漆·</p>
</div>
<div class="scroll-ol">
<h3>夏天來了</h3>
<p>夏日，就應(yīng)當(dāng)是靜謐的，不需要風(fēng)的做伴，這會打破一切靜止的畫面，不需要與別人分享，這樣的美麗就會減少一分，不需要蟬鳴的演奏，這樣會增加不協(xié)調(diào)的聲音。就只需明媚的陽光，高高的天空與漂浮的云朵和我這一個觀賞者就夠了，就因這樣，我對這情景越來越喜愛，把我所有的感情傾注于它，已不是用“喜愛”二字來形容的。只能用心靈來訴說……</p>
</div>
<div class="scroll-ol">
<h3>秋天來了</h3>
<p>夏日，就應(yīng)當(dāng)是靜謐的，不需要風(fēng)的做伴，這會打破一切靜止的畫面，不需要與別人分享，這樣的美麗就會減少一分，不需要蟬鳴的演奏，這樣會增加不協(xié)調(diào)的聲音。就只需明媚的陽光，高高的天空與漂浮的云朵和我這一個觀賞者就夠了，就因這樣，我對這情景越來越喜愛，把我所有的感情傾注于它，已不是用“喜愛”二字來形容的。只能用心靈來訴說……</p>
</div>
<div class="scroll-ol">
<h3>冬天來了</h3>
<p>夏日，就應(yīng)當(dāng)是靜謐的，不需要風(fēng)的做伴，這會打破一切靜止的畫面，不需要與別人分享，這樣的美麗就會減少一分，不需要蟬鳴的演奏，這樣會增加不協(xié)調(diào)的聲音。就只需明媚的陽光，高高的天空與漂浮的云朵和我這一個觀賞者就夠了，就因這樣，我對這情景越來越喜愛，把我所有的感情傾注于它，已不是用“喜愛”二字來形容的。只能用心靈來訴說……</p>
</div>
</div>
<!-- 滾動條 -->
<div class="scroll-bar">
<!-- 滾動滑塊 -->
<div class="scroll-slider"></div>
</div>
</div>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 創(chuàng)建全局變量，讓匿名函數(shù)中的變量在外部能夠訪問
var Scroll = {};
// 自調(diào)用匿名函數(shù)，防止與已有函數(shù)、方法或變量沖突
(function(win,doc,$){
// 創(chuàng)建構(gòu)造函數(shù)
function CusScrollBar(options){
// 實例化時，this就代表實例
this._init(options);
}
// 構(gòu)造函數(shù)原型上添加屬性和方法，所有實例上就能夠共享(不同實例之間的屬性相互獨(dú)立)
// CusScrollBar.prototype._init = function() {
// console.log("test");
// }
// 利用 $.extend(true, target object, object1);優(yōu)化構(gòu)造函數(shù).
//CusScrollBar.prototype 上添加_init方法
$.extend(CusScrollBar.prototype, {
// 指定參數(shù)
_init:function(options){
//防止this的混用
var self = this;
// 指定默認(rèn)屬性
self.options = {
scrollDir : "y", //滾動的方向
contSelector : "", //滾動內(nèi)容區(qū)選擇器
barSelector : "", //滾動條選擇器
sliderSelector : "" //滾動滑塊選擇器
}
//通過參數(shù)傳遞，進(jìn)行深拷貝，||是為了代碼的健壯性
$.extend(true, self.options, options || {});
// console.log(self.options);
// 調(diào)用初始化DOM函數(shù)
self._initDomEvent();
return self;
},
// 監(jiān)聽內(nèi)容的滾動，同步滑塊位置
_bindContScroll : function() {
}
// 初始化DOM引用
// @method _initDomEvent
// @return {CusScrollBar}
_initDomEvent : function() {
// DOM的引用更方便使用
var opts = this.options;
// 滾動內(nèi)容區(qū)，必填項
this.$cont = $(opts.contSelector);
// 滾動條滑塊，必填項
this.$slider = $(opts.sliderSelector);
// 滾動條對象
this.$bar = opts.barSelector ? $(opts.barSelector) : self.$slider.parent();
//獲取文檔對象
this.$doc = $(doc);
// 調(diào)用滑塊拖動功能
this._initSliderDragEvent();
},
// 初始化滑塊拖動功能
// @return {[Object]} [this]
_initSliderDragEvent:function() {
var slider = this.$slider,
// 獲取slider元素
sliderEl = slider[0];
if (sliderEl) {
var doc = this.$doc,
dragStartPagePosition,
dragStartScrollPosition,
dragContBarRate;
// 鼠標(biāo)移動事件
function mousemoveHandler(e) {
e.preventDefault();
console.log('mousemove');
// 判斷是否有按下鼠標(biāo)
if (dragStartPagePosition == null) { return;}
//傳入的參數(shù)為內(nèi)容的滾動高度
self.scrollTo(dragStartScrollPosition + (e.pageY - dragStartPagePosition)*dragContBarRate);
}
// 事件對象是經(jīng)過jQuery包裝后的,可以不用考慮兼容性問題
slider.on('mousedown',function(e){
var self = this;
// 阻止事件默認(rèn)行為
e.preventDefault();
console.log('mousedown');
// 鼠標(biāo)按下時，獲得鼠標(biāo)相對于文檔頂部邊緣的距離
dragStartPagePosition = e.pageY;
// 超出元素上邊界的那部分內(nèi)容
// 內(nèi)容可滾動高度封裝成一個方法
dragStartScrollPosition = self.$cont[0].scrollTop;
dragContBarRate = self.getMaxScrollPosition / self.getMaxSliderPositon;
// 鼠標(biāo)按下時，仍能夠移動
// 通過事件的命名空間確定具體事件
doc.on('mousemove.scroll', mousemoveHandler).on('mouseup.scroll', function(e) {
console.log('mouseup');
// 可以直接通過命名空間進(jìn)行移除事件
doc.off('.scroll');
})
})
}
},
// 內(nèi)容可滾動的高度
getMaxScrollPosition :function() {
var self = this;
//取最大的值（可視區(qū)的高度, 整篇內(nèi)容的完整高度）作為內(nèi)容的整體高度
return Math.max(self.$cont.height(), self.$cont[0].scrollHeight) - self.$cont.height();
},
// 滑塊可移動的距離
getMaxSliderPositon :function() {
var self = this;
return self.$bar.height() - self.$slider.height();
},
scrollTo : function(positionVal) {
var self = this;
self.$cont.scrollTop(positionVal);
}
});
win.CusScrollBar = CusScrollBar;
})(window,document,jQuery);
new CusScrollBar({
contSelector : ".scroll-wrap", //滾動內(nèi)容區(qū)選擇器
barSelector : ".scroll-bar", //滾動條選擇器
sliderSelector : ".scroll-slider" //滾動滑塊選擇器
});
</script>
</div>
</body>
</html>以下是報錯信息
Uncaught TypeError: Cannot read property '0' of undefined
{
...,
// 你是這樣定義的
_initDomEvent：function() {
var opts = this.options;
this.$cont = $(opts.contSelector);
this.$slider = $(opts.sliderSelector);
this.$bar = opts.barSelector ? $(opts.barSelector) : self.$slider.parent();
this.$doc = $(doc);
...
},
// 其他方法，你是這樣調(diào)用的
xxx：function() {
var self = this;
self.$cont/self.slider/self.$cont/self.$doc
}這樣你的self.$cont/self.slider/self.$cont/self.$doc其實并沒有定義；
如果你的意圖是在_initDomEvent定義在其他方法里使用，那應(yīng)該類似于
{
a:{},
b:function() {
this.a.$cont = $(opts.contSelector),
this.a.$slider = $(opts.sliderSelector),
....
},
c: function() {
this.b();
console.log(this.a.$cont);
}
}
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
達(dá)內(nèi)教育集團(tuán)成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
北大課工場是北京大學(xué)校辦產(chǎn)業(yè)為響應(yīng)國家深化產(chǎn)教融合／校企合作的政策，積極推進(jìn)“中國制造2025”，實現(xiàn)中華民族偉大復(fù)興的升級產(chǎn)業(yè)鏈。利用北京大學(xué)優(yōu)質(zhì)教育資源及背
博為峰，中國職業(yè)人才培訓(xùn)領(lǐng)域的先行者
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多