Scrollbar - Calculate Motion Field

Asked

Viewed 284 times

0

How to calculate the scrollbar div motion field 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, only if you increase the body size it looks the same in jsfiddle...

I made a comment on the part of the script you need to change...

javascript jquery
  • 1

    I didn’t understand the real problem, it’s the question of not being able to get the scroll bar to the end?

  • @luigibertaco, exactly!!!

  • I put 11.5 and she goes all the way... Fiddle

  • @Kaduamaral, but in case I lower the body he Buga...

2 answers

1


Try to calculate the speed by dividing the screen size by the size of your bar, or something like that. I haven’t identified a lot of problems here, but I’m not so into your project, but I put a speed variable and also put to update the bar when the window is resized.

Fiddle

A suggested 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 this difference, but I’m not in so much time now to see this.

  • When you can help me with this suggestion to ignore the cursor position on the scroll bar!!!

  • All right, when you have a little time I’ll see what I can do here.

1

I changed the lines:

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

And 

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

Stayed 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();
        }
    }
});

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.