ScrollBar - Calculate field of motion

Navigation
0

How to calculate the motion field of the scrollbar div in this case:

JSFIDDLE 

var margem = 0;
function criarBarraDeRolagem(){
if ($( document ).height() < $( window ).height()) 
{
return; 
}
var tamanho = $( window ).height() / $( document ).height();
$('#rolagem2').css('top', margem + ($( window ).scrollTop() * tamanho));
$('#rolagem2').height($( window ).height() * tamanho - (margem + margem) );
}

$(document).ready(function(){
criarBarraDeRolagem();
});



var dragObj = null;
$("#rolagem2, body, html").mouseup(function(){
$('body, html').removeClass("unselectable");
dragObj = null;
});

$("#rolagem2").mousedown(function(){
$('body, html').addClass("unselectable");
dragObj = this;
});

$("#rolagem2, body, html").mousemove(function(e){
if( dragObj ) 
{
var move = e.pageY - $("#rolagem").offset().top;
$(window).scrollTop(move * 4); // O PROBLEMA ESTÁ AQUI
criarBarraDeRolagem();
e.stopPropagation();
e.preventDefault();
}   
});

The script works, but if you increase the size of the body it looks the same in jsfiddle ...

I made a comment on the part of the script that needs to be changed ...

    
asked by anonymous 25.09.2014 / 19:23

2 answers

1

Try to calculate the speed by dividing the size of the screen by the size of your bar, or something similar. I did not identify a lot of problems here, but I'm not so into your project, but I put a variable speed and also put to update the toolbar when the window is resized .

Fiddle

A suggestion for improvement would be to ignore the position of the cursor on the scroll bar, subtracting the position of the bar by the mouse position and ignoring that difference, but I'm not having so much time now to see this.     

25.09.2014 / 19:52
1

I changed the lines: 

$('#rolagem2').css('top', $(window).scrollTop());

E 

if (move < $(window).height() - $('#rolagem2').height()){

It was like this 

var margem = 0;

function criarBarraDeRolagem() {
    if ($(document).height() < $(window).height()) {
        return;
    }
    var tamanho = $(window).height() / $(document).height();
    $('#rolagem2').css('top', $(window).scrollTop());
    $('#rolagem2').height($(window).height() * tamanho - (margem + margem));
}

$(document).ready(function () {
    criarBarraDeRolagem();
});



var dragObj = null;
$("#rolagem2, body, html").mouseup(function () {
    $('body, html').removeClass("unselectable");
    dragObj = null;
});

$("#rolagem2").mousedown(function () {
    $('body, html').addClass("unselectable");
    dragObj = this;
});

$("#rolagem2, body, html").mousemove(function (e) {
    if (dragObj) {
        var move = e.pageY - $("#rolagem").offset().top;
        if (move < $(window).height() - $('#rolagem2').height()){
            $(window).scrollTop(move); // O PROBLEMA ESTÁ AQUI
            criarBarraDeRolagem();
            e.stopPropagation();
            e.preventDefault();
        }
    }
});
    
25.09.2014 / 19:57
Array Out of Bounds reading Archive System.getProperty () on the server