为什么webkit和firefox/MSIE之间jQuery.position（）的行为有所不同_Jquery_Css_Firefox

为什么webkit和firefox/MSIE之间jQuery.position（）的行为有所不同

jquery css firefox

为什么webkit和firefox/MSIE之间jQuery.position（）的行为有所不同,jquery,css,firefox,Jquery,Css,Firefox,这是一个长的。我正在尝试在我的站点中实现水平滚动。它在Safari和Chrome中运行良好，但在Firefox中不行（我现在还不会开始讨论IE的问题）据我所知，Webkit使用的是滚动条抓取器div的相对位置，而firefox使用的是它相对于文档的位置看看发生了什么这是滚动条的CSS /* The Scrollbar */ #scrollbar { position: relative; width: 70%; display: block; margin:

这是一个长的。我正在尝试在我的站点中实现水平滚动。它在Safari和Chrome中运行良好，但在Firefox中不行（我现在还不会开始讨论IE的问题）

据我所知，Webkit使用的是滚动条抓取器div的相对位置，而firefox使用的是它相对于文档的位置

看看发生了什么

这是滚动条的CSS

/* 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;
}

以及支持它的jQuery

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

var-grabberClicked=false；
var dragStart；
var-grabberStart；
var比率；
var被绑定；
var totalWidth=0；
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
$（文档）.ready（函数（）{
$（“#项目”）.width（getTotalWidth（））；
设置（）；
$（“#抓取器”）.mousedown（startScroll）；
$（窗口）.mouseup（结束滚动）；
$（“#视口”）。滚动（positionGrabber）；
$（窗口）。调整大小（设置）；
});
函数getTotalWidth（）{
$（“.project”）。每个（函数（）{
totalWidth+=$（此）.width（）；
totalWidth+=parseInt（$（this）.css（“marginLeft”）*2；
})
返回总宽度；
}
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
函数设置（）{
比率=$（“#视口”）.width（）/$（“#项目”）.width（）；
//抓斗宽度
$（“#抓取器”）.width（$（“#滚动条”）.width（）*比率）；
scrollBound=$（“#滚动条”）.width（）-$（“#抓取器”）.width（）；
//如果用户调整窗口大小，则相应地定位抓取器
位置抓取器（）；
}
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
功能启动滚动（事件）{
$（窗口）.bind（'mousemove'，滚动）；
变量位置=$（“#滚动条”）.position（）；
dragStart=event.pageX-position.left；
grabberStart=parseInt（$（“#grabber”）.css（“左”）；
$（“#反馈”）.html（$（“#抓取器”）.position（）.left）；
}
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
功能结束滚动（事件）{
$（窗口）。解除绑定（'mousemove'，滚动）；
}
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
函数滚动（事件）{
var newPos=grabberStart+（event.pageX-dragStart）；
//$（“#反馈”）.html（$（“#抓取器”）.position（）.left+“/”+newPos）；
//界限
newPos=（newPos>0）？newPos:0；
newPos=（newPos


有什么想法吗？我知道我应该知道这个问题的答案，但我盯着它看了这么久，却看不见它
干杯
我把你的代码弄乱了一点，我想问题在于位置。left
返回对象相对于窗口的位置，它返回的是滚动条的位置。因此，只需将位置变量从#scrollbar
更改为#grabber
就可以了
var position = $("#grabber").position();

因此，您不需要保存grabberStart
位置
最后，出于某种原因，我花了一段时间才弄明白，IE不喜欢绑定到窗口
事件。所以我把它们换成了文档
，然后砰的一声！他工作得很好
这是您的脚本更新与我提到的变化。顺便说一句，这个网站很好看
// **********************************************
// 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);
}

//**********************************************
//Throll:Toms水平滚动
//开发者：汤姆·艾尔兹
//联系人：him@tomelders.com
// **********************************************
//文件：throll.1.0.js
//说明：
//CSS和JS水平涂鸦不需要
//中断浏览器的本机功能。
//
//版权所有2010，Tom Elders
//
// **********************************************
var=false；
var dragStart；
var比率；
var被绑定；
var totalWidth=0；
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
$（文档）.ready（函数（）{
$（“#项目”）.width（getTotalWidth（））；
设置（）；
$（“#抓取器”）.mousedown（startScroll）；
$（文档）.mouseup（结束滚动）；
$（“#视口”）。滚动（positionGrabber）；
$（窗口）。调整大小（设置）；
});
函数getTotalWidth（）{
$（“.project”）。每个（函数（）{
totalWidth+=$（此）.width（）；
totalWidth+=parseInt（$（this）.css（“marginLeft”）*2；
})
返回总宽度；
}
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
函数设置（）{
比率=$（“#视口”）.width（）/$（“#项目”）.width（）；
//抓斗宽度
$（“#抓取器”）.width（$（“#滚动条”）.width（）*比率）；
scrollBound=$（“#滚动条”）.width（）-$（“#抓取器”）.width（）；
//如果用户调整窗口大小，则相应地定位抓取器
位置抓取器（）；
}
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
功能启动滚动（事件）{
$（document）.bind（'mousemove'，滚动）；
变量位置=$（“#抓取器”）.position（）；
dragStart=event.pageX-position.left；
}
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
功能结束滚动（事件）{
$（文档）.unbind（'mousemove'，滚动）；
}
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
函数滚动（事件）{
var newPos=event.pageX-dragStart；
//界限
newPos=（newPos>0）？newPos:0；
newPos=（newPos