Issue
I was thinking to make custom scrollbar jQuery plugin, there are many plugins available for it but I want to make my own, problem is I am not getting the concept that how should I move a content by moving other div element (scrollbar) and also how should I move content by using mouse scroller??
Please help me to understand this.
Thanks
Solution
Scrollbars logic
(onInit, onResize) thumbSize = viewportSize * viewportSize / areaSize
(onThumbDrag) viewportScrollPos = areaSize / viewportSize * thumbPos
(onViewportScroll) thumbPos = viewportScrollPos / viewportSize * thumbSize
The easiest concept would be to use the jQuery UI draggable and attach the .draggable()
Method to the .scrollbar
var $scrollable = $(".scrollable"),
$scrollbar = $(".scrollbar"),
height = $scrollable.outerHeight(true), // visible height
scrollHeight = $scrollable.prop("scrollHeight"), // total height
barHeight = height * height / scrollHeight; // Scrollbar height!
// Scrollbar drag:
$scrollbar.height( barHeight ).draggable({
axis : "y",
containment : "parent",
drag: function(e, ui) {
$scrollable.scrollTop( scrollHeight / height * ui.position.top );
}
});
// Element scroll:
$scrollable.on("scroll", function() {
$scrollbar.css({top: $scrollable.scrollTop() / height * barHeight });
});
.parent{
position:relative;
overflow:hidden;
height:200px;
width:180px;
background:#ddd;
}
.scrollable{
overflow-y:scroll;
position:absolute;
padding:0 17px 0 0;
width: 180px;
height:100%;
}
.scrollbar{
cursor:n-resize;
position:absolute;
overflow:auto;
top:0px;
right:0px;
z-index:2;
background:#444;
width:17px;
border-radius:8px;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<div class="parent">
<div class="scrollbar"></div>
<div class="scrollable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.
</div>
</div>
The above is just an example with the needed logic and math involved,
it misses the "hide-scrollbar", just to keep it simple. I'll leave to you to add all the needed tweaks, addons.
Answered By - Roko C. Buljan Answer Checked By - Candace Johnson (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.