ignore the cursor position on the scroll bar

Asked

Viewed 64 times

0

How to ignore the cursor position on the scroll bar ?

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;
var speed = $(window).height() / $("#rolagem2").height();
$(window).scrollTop(move * speed);
criarBarraDeRolagem();
e.stopPropagation();
e.preventDefault();
}   
});

Còdigo working! Just need to ignore the cursor position on the scroll bar...

EDIT: New fiddle!!! http://jsfiddle.net/1qq27jan/11/

  • looks good that it is working, post also some attempt of his, tests and similar

  • 2

    It would be nice to explain what the code does, and why you need to ignore this cursor position.

1 answer

1

var margem = 0;
var diff = 0

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

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

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

$("#rolagem2").mousedown(function (e) {
    $('body, html').addClass("unselectable");
    dragObj = this;
    diff = e.pageY - $("#rolagem2").offset().top;
});

$("#rolagem2, body, html").mousemove(function (e) {
    if (dragObj) {
        var move = e.pageY - $("#rolagem").offset().top;
        var speed = $(window).height() / $("#rolagem2").height();
        $(window).scrollTop((move - diff) * speed);
        criarBarraDeRolagem();
        e.stopPropagation();
        e.preventDefault();
    }
});

Jsfiddle Running

  • but still with the same problem...

  • is no longer bouncing as before, which problem you refer to?

  • he now jumps from the bottom up

  • Valew!!!!!!!!!!!!

  • only got a problem, when I put margin he Buga again, http://jsfiddle.net/1qq27jan/11/ in that fiddle put 20 of margin and bugged...

  • @luigibertaco, it was good, but it would be good for you to explain what was done, so that other people can understand.

Show 1 more comment

Browser other questions tagged

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