Pourquoi jQuery.position() se comporte différemment entre webkit et firefox/MSIE

Question

En voici une longue. J'essaie d'implémenter le défilement horizontal sur mon site. Cela fonctionne très bien dans Safari et Chrome, mais pas dans Firefox (je ne vais pas commencer sur les problèmes d'IE pour l'instant). D'après ce que je peux dire, Webkit utilise la position relative de la div de grabber de barre de défilement, pendant que firefox prend sa position par rapport au document.

You can test it here pour voir ce qui se passe.

Voici le CSS pour la barre de défilement

/* The Scrollbar */ 
#scrollbar 
{ 
    position: relative; 
    width: 70%; 
    display: block; 
    margin: 0px auto; 
    border: #444444 1px solid; 
    border-width: 0 0 1px 0; 
    overflow: visible; 
} 

#grabber 
{ 
    position: relative; 
    top: 8px; 
    left: 0px; 
    height: 20px; 
    display: block; 
    background: url(assets/grabber-left.png) no-repeat; 
} 

#grabber-end 
{ 
    height: inherit; 
    width: 50%; 
    background: url(assets/grabber-right.png) no-repeat; 
    background-position: 100% 0; 
    float: right; 
} 

Et le jQuery qui l'alimente

var grabberClicked = false; 
var dragStart; 
var grabberStart; 
var ratio; 
var scrollBound; 
var totalWidth = 0; 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

$(document).ready(function(){ 

    $("#projects").width(getTotalWidth()); 
    setup(); 
    $("#grabber").mousedown(startScroll); 
    $(window).mouseup(endScroll); 
    $("#viewport").scroll(positionGrabber); 
    $(window).resize(setup); 


}); 

function getTotalWidth(){ 

    $(".project").each(function(){ 

     totalWidth += $(this).width(); 
     totalWidth += parseInt($(this).css("marginLeft")) * 2; 

    }) 

    return totalWidth; 

} 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

function setup(){ 
    ratio = $("#viewport").width()/$("#projects").width(); 

    // grabber width 
    $("#grabber").width($("#scrollbar").width() * ratio); 
    scrollBound = $("#scrollbar").width() - $("#grabber").width(); 

    // incase the user resizes the window, position the grabber accordingly 
    positionGrabber(); 
} 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

function startScroll(event){ 
    $(window).bind('mousemove', scroll); 
    var position = $("#scrollbar").position(); 
    dragStart = event.pageX - position.left; 
    grabberStart = parseInt($("#grabber").css("left")); 
    $("#feedback").html($("#grabber").position().left); 
} 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

function endScroll(event){ 
    $(window).unbind('mousemove', scroll); 
} 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

function scroll(event){ 
    var newPos = grabberStart + (event.pageX - dragStart); 
    //$("#feedback").html($("#grabber").position().left +" // "+ newPos); 

    // bounds 
    newPos = (newPos > 0) ? newPos : 0; 
    newPos = (newPos < scrollBound) ? newPos : scrollBound; 

    viewportPos = ($("#projects").width() * (newPos/$("#scrollbar").width())); 
    $("#viewport").scrollLeft(viewportPos); 
    $("#grabber").css("left", newPos); 

} 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

function positionGrabber(event){ 
    var grabberPos = $("#scrollbar").width() * ($("#viewport").scrollLeft()/$("#projects").width()); 
    $("#grabber").css("left", grabberPos); 
} 

Toutes les idées? Je sais que je devrais connaître la réponse à cette question, mais je l'ai regardé si longtemps que je suis aveugle.

acclamations

Answer 1

Je foiré un peu avec votre code, je pense que le problème est que position.left renvoie la position de l'objet par rapport à la fenêtre et il retournait la position de la barre de défilement. Donc, juste changer la variable de position de #scrollbar à #grabber a fonctionné pour moi.

var position = $("#grabber").position(); 

et à cause de cela, vous n'avez pas besoin d'enregistrer la position grabberStart

Enfin, pour une raison quelconque, et cela m'a pris un certain temps pour comprendre, IE n'aime pas se lier à window événements. Donc, je les ai passés à document et BAM! IE fonctionne parfaitement.

Voici votre script mis à jour avec les changements que j'ai mentionnés. Beau site d'ailleurs!

// ********************************************** 
// Throll: Toms Horizontal Scroll 
// Developer: Tom Elders 
// Contact: him@tomelders.com 
// ********************************************** 
// File: throll.1.0.js 
// Description: 
// CSS and JS horizontal scriolling that doesn't 
// break the browers native functionality. 
// 
// Copyright 2010, Tom Elders 
// 
// ********************************************** 

var grabberClicked = false; 
var dragStart; 
var ratio; 
var scrollBound; 
var totalWidth = 0; 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

$(document).ready(function(){ 

    $("#projects").width(getTotalWidth()); 
    setup(); 
    $("#grabber").mousedown(startScroll); 
    $(document).mouseup(endScroll); 
    $("#viewport").scroll(positionGrabber); 
    $(window).resize(setup); 


}); 

function getTotalWidth(){ 

    $(".project").each(function(){ 

     totalWidth += $(this).width(); 
     totalWidth += parseInt($(this).css("marginLeft")) * 2; 

    }) 

    return totalWidth; 

} 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

function setup(){ 
    ratio = $("#viewport").width()/$("#projects").width(); 

    // grabber width 
    $("#grabber").width($("#scrollbar").width() * ratio); 
    scrollBound = $("#scrollbar").width() - $("#grabber").width(); 

    // incase the user resizes the window, position the grabber accordingly 
    positionGrabber(); 
} 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

function startScroll(event){ 
    $(document).bind('mousemove', scroll); 
    var position = $("#grabber").position(); 
    dragStart = event.pageX - position.left; 
} 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

function endScroll(event){ 
    $(document).unbind('mousemove', scroll); 
} 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

function scroll(event){ 
    var newPos = event.pageX - dragStart; 

    // bounds 
    newPos = (newPos > 0) ? newPos : 0; 
    newPos = (newPos < scrollBound) ? newPos : scrollBound; 

    viewportPos = ($("#projects").width() * (newPos/$("#scrollbar").width())); 
    $("#viewport").scrollLeft(viewportPos); 
    $("#grabber").css("left", newPos); 

} 

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

function positionGrabber(event){ 
    var grabberPos = $("#scrollbar").width() * ($("#viewport").scrollLeft()/$("#projects").width()); 
    $("#grabber").css("left", grabberPos); 
}