Use scrollTop, but the element is not available - Codes Helper

I want to get the scrollTop value when the mouse is pressed, but when I press it, I can"t find that element.

dragStartScrollPosition = self.$cont[0].scrollTop;

I think the element is not fetched, but the newly created object has been checked and the class name is correct. Here is the source code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></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: -sharpccc;
        }
        .scrollBox {
            width: 540px;
            margin: 20px auto;
            background-color: -sharpfff;
            border: 2px solid -sharpe5e5e5;
        }
        .scroll-tab {
            height: 30px;
            border: 1px solid -sharpe5e5e5;
            color: -sharp666;
            background-color: -sharpf8f8f8;
        }
        .scroll-tab .tab-item {
            float: left;
            font: 16px/30px "Microsoft YaHei";
            line-height: 30px;
            padding:0 20px;
        }
        /*  */
        .scroll-tab .tab-active {
            color: -sharp00be3c;
            background-color: -sharpfff;
            border-top:2px solid -sharp00be3c;
            margin: -1px 0;
        }
        /*  */
        .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: -sharpaeaeae;
        }
        .scroll-bar .scroll-slider {
            position: absolute;
            top: 0;
            left: 1px;
            width: 8px;
            height: 40px;
            background-color: -sharpfff;
        }
    </style>
</head>
<body>
    

<div class="scrollBox">
    <ul class="scroll-tab">
        <!--  -->
        <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>
    <!--  -->
    <div class="scroll-wrap clearfix">
    <!--  -->
        <div class="scroll-cont">
            <h3></h3>
            <div class="scroll-ol">
                ;;
            </div>
            <div class="scroll-ol">
            <h3></h3>
                "" 
            </div>
            <div class="scroll-ol">
            <h3></h3>
                "" 
            </div>
            <div class="scroll-ol">
            <h3></h3>
                "" 
            </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">
    // 
    var Scroll = {};
    // 
    (function(win,doc,$){
        // 
        function CusScrollBar(options){
            // this
            this._init(options);
        }
        // ()
        // CusScrollBar.prototype._init = function() {
        //     console.log("test");
        // }
        //  $.extend(true, target object, object1);.
        //CusScrollBar.prototype _init
        $.extend(CusScrollBar.prototype, {
            // 
            _init:function(options){
                //this
                var self = this;
                // 
                self.options = {
                    scrollDir      : "y",   //
                    contSelector   : "",    //
                    barSelector    : "",    //
                    sliderSelector : ""     //
                }
                //||
                $.extend(true, self.options, options || {});
                // console.log(self.options);
                // DOM 
                self._initDomEvent();
                return self;
            },
            // 
            _bindContScroll : function() {

            }
            // DOM
            // @method _initDomEvent
            // @return {CusScrollBar}
            _initDomEvent : function() {
                // DOM
                var opts = this.options;
                // 
                this.$cont = $(opts.contSelector);
                // 
                this.$slider = $(opts.sliderSelector);
                // 
                this.$bar = opts.barSelector ? $(opts.barSelector) : self.$slider.parent();
                //
                this.$doc = $(doc);
                // 
                this._initSliderDragEvent();
            },
            // 
            // @return {[Object]} [this]
            _initSliderDragEvent:function() {
                var slider = this.$slider,
                // slider
                    sliderEl = slider[0];
                if (sliderEl) {
                    var doc = this.$doc,
                        dragStartPagePosition,
                        dragStartScrollPosition,
                        dragContBarRate;
                // 
                function mousemoveHandler(e) {
                    e.preventDefault();
                    console.log("mousemove");
                    // 
                    if (dragStartPagePosition == null) { return;}
                        //
                    self.scrollTo(dragStartScrollPosition + (e.pageY - dragStartPagePosition)*dragContBarRate);
                }
                // jQuery,
                slider.on("mousedown",function(e){
                    var self = this;
                    // 
                    e.preventDefault();
                    console.log("mousedown");
                    // 
                    dragStartPagePosition = e.pageY;
                    // 
                    // 
                    dragStartScrollPosition = self.$cont[0].scrollTop;
                    dragContBarRate = self.getMaxScrollPosition / self.getMaxSliderPositon;
                    // 
                    // 
                    doc.on("mousemove.scroll", mousemoveHandler).on("mouseup.scroll", function(e) {
                        console.log("mouseup");
                        // 
                        doc.off(".scroll");
                    })
                })
                }
            },
            // 
            getMaxScrollPosition :function() {
                var self = this;
                //, 
                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",        //
        barSelector    : ".scroll-bar",         //
        sliderSelector : ".scroll-slider"       // 
    });
</script>
</div>
</body>
</html>

the following is the error message

Uncaught TypeError: Cannot read property "0" of undefined