JQuery scroll bar length

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function(){

            var h = $('.paragraph').outerHeight();

            // the overall height of the text outside of the container minus the height 
            var hide = H - 500 ;

            $('.scroll_bar').draggable({
                axis: ' and ' ,
                of containment: ' parent ' ,
                 // limit set in the parent and the y-axis 

                Opacity: 0.6 ,

                the Drag: function (EV, ui) {
                     // use jqueryUI time, scroll events, all incoming EV (Event), ui 
                    var nowtop = ui.position.top;
                     // Alert (nowtop) 
                    var nowscroll = parseInt (nowtop / 290 hide *); 
                    $ ( ' .paragraph ' ) .css ({Top: - nowscroll});

                    
                    // calculation here is: 
                    / *    
                    The remaining text height / text height = scroll space remaining / total rolling space.
                    ====> conversion, to ensure that the size of the scroll bar, without the proportional mode, the top line directly movable with respect to the control space ratio of the top line of text. <======
                    Slider top line / space = entire document can scroll to the top of the vessel exceeds the pixel / non-visible document height.
                    */
                }

            });

        })

    </script>
    <style type="text/css">
        .scroll_con{
            width:400px;
            height:500px;
            border:1px solid #ccc;
            margin:50px auto 0;
            position:relative;
            overflow:hidden;
        }

        .paragraph{
            width:360px;
            position:absolute;
            left:0;
            top:0;
            padding:10px 20px;
            font-size:14px;
            font-family:'Microsoft Yahei';
            line-height:32px;
            text-indent:2em;
        }

        .scroll_bar_con { 
            width : 10px ; 
            height : 490px ; 
            position : Absolute ; 
            right : 5px ; 
            / * positioned on the right side * / 
            Top : 5px ; 
        }

        .scroll_bar{
            width:10px;
            height:200px;
            background-color:#ccc;
            position:absolute;
            left:0;
            top:0;
            cursor:pointer;
            border-radius:5px;

        }

    </style>
</head>
<body>
    <div class="scroll_con">
        <div class="paragraph">

            <p>
                Always sleep at night. Everything must be obtained research will understand.
            </p>
            <p>
                They - have to Kochi play flail before, there are a gentleman palm over the mouth, there are runners accounted for his wife, but also I Mother was beaten to death creditors; they then face, and there are not so afraid of yesterday, nor so fierce.
            </p>
            <p>
                The most strange thing is that the woman on the street yesterday, playing his son, his mouth said, "I ah! I only want to bite you a few mouthfuls of air!" His eyes were looking at me. I was startled out of concealing; a group of people that large teeth, they are laughter together. Chen Lao catch up before five, I forcibly dragged home in the.
            </p>
            <p>
                Drag me home, home people pretended not to know me; they face, are all the same with others. Into the study, then Flip door, hearted is off a ducks. This thing, I guess the more to teach the ins and outs.
            </p>
                A few days ago, the wolf village of tenants to report the shortage, said to my brother, a villain in their village, killing everyone; some people will dig out his heart and liver, the oil and fry the food, can be strong embolden the child. I inserted the sentence mouth, and tenants will have to see my brother glances. They only know the eyes of today, all exactly the same with that group of people outside to think of it, I'm straight cold from top to heel.
            </p>
            <p>
                They will eat people, they will not necessarily eat me.
            </p>
            <p>
                Look at the woman, "you bite a few mouthfuls," then, large teeth and a group of people laugh, and the day before the tenant, then obviously signal. I see his words full of poison, full of laughter knife. Their teeth, all lined with white Li Li's, this is a cannibal.
            </p>
            <p>
                As I think myself, though not wicked, kick notebook since ancient house, may hard to say. They do not seem to have thought, I guess the whole. Moreover, as they fell, they say people are wicked. I remember on the big brother taught me to do, no matter how good, he turned a few words, he marked a few laps; forgive a few bad guys, he said, "earthshaking skilled artist, unique." I guess there their mind, exactly how; moreover is time to eat.
            </p>
            <p>
                Everything always have to study, will understand. Ancient times when people eat, I remember, but not very clear. I turn over a check, it's not history, are the words "virtue and morality," the words on each leaf crooked. I could not sleep anyway, carefully read the middle of the night, only to see the word from the crevices of the word, the word is written all over this "man-eating"! This book was written many words, tenants say many words, but all the blame upon me smiling wide open.
            </p>
            <p>
                I am also a person, they want to eat me!
            </p>

        </div>
        <div class="scroll_bar_con">
            <div class="scroll_bar">
        </div>
        
    </div>
    
    </div>

</body>
</html>
JQuery scroll bar length

Guess you like
