element.scrollLeft有时不起作用

Question

我的html中有以下div

<div id="screen"></div>

使用Javascript，我添加和删除图像到div。 div的样式设置为溢出滚动。我使用jquery的scrollLeft在点击图像时向左或向右移动图像。

$("#screen").scrollLeft(location);

每个图像都有不同的位置值，并传递给函数。我的问题是它有时会起作用，有时候它不起作用。所以，例如：

previousLocation = 800;
$("#screen").scrollLeft(previousLocation);

大部分时间都可以使用。但有时，它完全忽略了800并将scrollLeft设置为0，所以我的图像没有滚动。这发生在Firefox中。在野生动物园，铬合金或歌剧中没有发生过。

下面是我编写的较小版本的代码。我的代码几乎相同，只是它在roomParams数组中有更多的图像。

var previousLocation = 0;
var roomParams = [
    {roomName: 'galleryEnter', imageLocation: 'images/galleryEnter.png', scroll: 'scrollX', backLocation: 0, mapName: 'galleryEnterMap', mapArray: [
        {mapAlt:'Happy Family Cage', mapShape:'poly', mapCoords:'261,352,6,372,4,3,256,2', clickEvent:'changeRoom("happyFamilyCage");'},
        {mapAlt:'Mice Notice', mapShape:'poly', mapCoords:'21,404,162,392,166,449,27,462', clickEvent:'changeRoom("miceNotice");'},
        {mapAlt:'Happy Family Sign', mapShape:'poly', mapCoords:'181,392,255,385,255,439,183,445', clickEvent:'changeRoom("happyFamilySign");'},
        {mapAlt:'Happy Family Sign 2', mapShape:'poly', mapCoords:'290,279,360,271,360,313,291,326', clickEvent:'changeRoom("happyFamilySign2");'},
    ]},
    {roomName: 'happyFamilyCage', imageLocation: 'images/happyFamilyCage.png', buttonBack: 'changeRoom("galleryEnter");', backLocation: 0},
    {roomName: 'miceNotice', imageLocation: 'images/miceNotice.png', buttonBack: 'changeRoom("galleryEnter");', backLocation: 500},
    {roomName: 'happyFamilySign', imageLocation: 'images/happyFamilySign.png', buttonBack: 'changeRoom("galleryEnter");', backLocation: 675},
    {roomName: 'happyFamilySign2', imageLocation: 'images/happyFamilySign2.png', buttonBack: 'changeRoom("galleryEnter");', backLocation: 1000}
];

function changeRoom(setRoom){
    var element;
    var fragment = document.createDocumentFragment();
    var roomImage = document.createElement("img");
    var roomMap = document.createElement("map");
    var mapArea = document.createElement("area");
    $("#screen").empty(); //empty all content in screen div
    for(x=0; x < roomParams.length; x++){ //search the array until setRoom matches the roomName
        if(setRoom == roomParams[x].roomName){
            element = roomImage.cloneNode(true);
            element.setAttribute("src", roomParams[x].imageLocation);
            fragment.appendChild(element);
            document.getElementById("screen").appendChild(fragment);        
            if(roomParams[x].mapName){
                //if image has hotspots, create the map tag on html page
                element.setAttribute("usemap", "#" + roomParams[x].mapName);
                element = roomMap.cloneNode(true);
                element.setAttribute("name", roomParams[x].mapName);
                element.setAttribute("id", "currentMap");
                fragment.appendChild(element);
                document.getElementById("screen").appendChild(fragment);
                for(y=0; y < roomParams[x].mapArray.length; y++){
                    //adding multiple area tags to html page
                    element = mapArea.cloneNode(true);
                    element.setAttribute("href", "#");
                    element.setAttribute("alt", roomParams[x].mapArray[y].mapAlt);
                    element.setAttribute("shape", roomParams[x].mapArray[y].mapShape);
                    element.setAttribute("coords", roomParams[x].mapArray[y].mapCoords);
                    element.setAttribute("onclick", roomParams[x].mapArray[y].clickEvent);
                    fragment.appendChild(element);
                    document.getElementById("currentMap").appendChild(fragment);
                }
            }
            if(roomParams[x].scroll){
                //if image is larger than 640x480, set the scroll
                document.getElementById("screen").className = roomParams[x].scroll;
            }
            else{
                //else remove the scroll
                document.getElementById("screen").className = "scrollNone";
            }
            if(roomParams[x].buttonBack){
                //if there is a previous room before the image, activate back button
                element = document.getElementById("backButton");
                element.className = "";
                element.setAttribute("onclick", roomParams[x].buttonBack);
            }
            else{
                //else deactivate back button
                document.getElementById("backButton").className = "gray";
            }
            $("#screen").scrollLeft(previousLocation);
            previousLocation = roomParams[x].backLocation;
            break;
        }
    }
}

window.addEventListener("load", function(){
    changeRoom("galleryEnter");
});

任何人都可以帮我弄清楚这里有什么问题？ scrollLeft是firefox中的bug还是什么？