Jquery 如何在FF3中刷新div后重置持久滚动条位置？

我遇到了一个奇怪的滚动条问题。我正在构建一个页面，它使用jQuery和PHP将图像按顺序动态加载到DIV中。此DIV是固定高度，但使用滚动条作为其可变宽度。问题在于，动态刷新DIV后，滚动条不会重置。因此，当用户滚动并使用新内容刷新时，滚动条位置将保持不变，而不是重置回左侧

这似乎只发生在FF3中。在Chrome、Safari和IE8中，滚动条可以很好地重置

对于每次刷新，DIV都被隐藏、清空、使用CSS调整大小，然后依次附加图像

我试着在

nowrap

之前重置

空白：normal

，玩弄

溢出

，还有jQuery的

向左滚动

，但都没有用。它在FF3中的行为仍然很奇怪，而且只有FF3

单击缩略图，移动滚动条，然后单击另一个缩略图

---

谢谢你的帮助

当我在firebug交互控制台中键入此内容时：

var e = $('#interiors')[0]
e.scrollLeft = 0
e.scrollTop = 0

它似乎正确地重置了滚动条。在设置

scrollLeft

之前，该元素可能还需要显示

display

的

of
block
，但我不确定-我想，当我尝试这样做时，Firefox恢复了上次值，当
overflow:auto
元素从隐藏变为显示时

编辑：您可以尝试强制Firefox重置一些值。首先，当散列更改时，可以删除并重新添加“content”元素：

var e = $('#interiors')[0]
var p = e.parentNode
p.removeChild(e)
p.insertBefore(e, p.firstChild) // insert again before the caption

其次，在使用
$（“#interiors'）.empty（）或
$（“#interiors'）.hide（）之前，可以将
scrollLeft
/
scrollTop
值重置为
0
因此它不会保存值。
在隐藏/清除/设置HTML之前，我编辑了javascript以重置
scrollLeft
/
scrollTop
值。我将所有这些操作放在一个函数中，试图找出发生了什么

我已经在Firefox中测试过了，它似乎解决了滚动问题，但我还没有测试过任何其他浏览器。不过，这应该行得通

我的另一个答案似乎是对的，即您需要在Firefox中重置
scrollLeft
和
scrollTop
值，而
auto
溢出的元素显示为
block
，无论隐藏时滚动值是否更改，显示时似乎都会恢复旧值：

function setInteriors(html, hide) {
    var i = $('#interiors');

    // Reset the scrollbar positions BEFORE clearing/setting the HTML
    i.scrollLeft(0);
    i.scrollTop(0);

    // Set the HTML if provided, otherwise empty
    if (html) i.html(html);
    else i.empty();

    // Hide the element if hide is `true`
    if (hide) i.hide();
}

function showContent(nav) {
    if($.browser.safari) // webkit browsers
    { 
        bodyelement = $("body")
    }
    else
    { 
        bodyelement = $("html, body")
    }
    bodyelement.animate({ scrollTop: 0 }, 300);

    setInteriors(null, true);
    $('#caption').hide();
    $('#caption').empty();
    $('#landing').empty();

    // Detect document window size and use appropriate image heigh images

    if ($(window).height() < 832 ) // size of the document window, not browser window
    {                              // threshold for 600px images + 5 caption lines
        var imageHeight = 500;
    }
    else
    {
        var imageHeight = 600;
    }

    // Show #content so we can show/hide #interiors and #caption individually

    $('#content').show();
    if ((nav == "about") || (nav == "contact"))
    {
        setInteriors(null); // for fast back/forward button mashing

        switch(nav)
        {
            case "about":
                setInteriors($('#hidden-about').html()); // Load from hidden div
                break;
            case "contact":
                setInteriors($('#hidden-contact').html());
                break;
        }
        $('#interiors').css('height', '100%');  // Dimensions for "about" and "contact"
        $('#interiors').css('width', '645px');
        $('#interiors').css('white-space', 'normal');
        $('#interiors').fadeIn(200);
    }
    // TO DO: Maybe separate #interiors to two classes for dynamic changes?
    else
    {
        switch(imageHeight)
        {
            case 500:
                $('#interiors').css('height', '520px');  // Dimensions for gallery
                                                         // Extra 20px for scrollbar
                break;
            case 600:
                $('#interiors').css('height', '620px');
                break;
        }
        $('#interiors').css('width', '100%');
        setInteriors(null); // for fast back/forward button mashing
        $('#interiors').show();
        nav = (location.hash).substring(1); // for fast back/forward button mashing
        $('#caption').html('<P class="caption">' + $('#hidden-' + nav).html() + '</P>'); // load hidden captions
        $('#caption').fadeIn(300);  // show caption before images

        getImages = "http://www.shadowshapes.com/uttwerk/getImages.php?id=" + nav + "&height=" + imageHeight;
        $.getJSON(getImages, function(json) {
            var max = json.length;
            if(max > 0)
            {
                loadImage(0, max, nav);
            }

            function loadImage(index, max, nav) {
                if ((location.hash).substring(1) == nav) // until hash changes, load current nav
                {
                    if(index < max)
                    {
                        var newimg = new Image();
                        $(newimg).load(function () {
                            if ((location.hash).substring(1) == nav) // after current image loads
                            {                                        // continue if no hashchange
                                $('#interiors').append(this);
                                $('#interiors').css('white-space', 'nowrap');
                                $(this).hide();
                                if (max - index > 1)  // add space after each image except last one
                                {
                                    $(this).css('margin-right', '20px');
                                }
                                $(this).css('vertical-align', 'top');
                                $(this).fadeIn(200, function() {
                                        loadImage(index + 1, max, nav);
                                });
                            }
                        }).attr('src', json[index]);
                    }
                }
            }
        });
    }
}

function arrangeStars() {
    $('img.star').each(function () {
        thumbposition = $(this).siblings('a.nav').children('img').position();
        $(this).css("top", (thumbposition.top - 9));
        $(this).css("left", (thumbposition.left - 9));
    });
}

function placeStar(nav) {
    // clear all stars on hash change

    if ($('div.thumb').children('img').hasClass("visiblestar")) {
        $('div.thumb').children('img').removeClass("visiblestar").addClass("hiddenstar");
    }
    // attach star to selected thumbnail

    var test = $('div#_' + nav);
    if ($(test).children('img').hasClass("hiddenstar")) {
        $(test).children('img').removeClass("hiddenstar").addClass("visiblestar");
    }
}

$(document).ready(function() {

    //$.imgpreload(['', ''], {each: null, all:null});  

    // bind hover event for empty/contact/about hash only

    $(arrangeStars());  // positions stars in the corner of each thumbnail

    $('img.thumb, img.thumbwithborder').hover(
        function () {  
            var nav = (location.hash).substring(1);
            if ((nav == '') || (nav == "about") || (nav =="contact")) {
                nav = $(this).parent().parent().attr("id");
                $('div.thumb#' + nav).children('img').removeClass('hiddenstar').addClass('visiblestar');
            }
        },
        function () {  
            var nav = (location.hash).substring(1);
            if ((nav == '') || (nav == "about") || (nav =="contact")) {
                nav = $(this).parent().parent().attr("id");
                $('div.thumb#' + nav).children('img').removeClass('visiblestar').addClass('hiddenstar');
            }
        }
    );

    // hash change event triggers all the navigation and content switching

    jQuery.hashchangeDelay = 50;

    $(function() { 
        $(window).bind('hashchange', function() {
            var nav = (location.hash).substring(1);
            if (nav != '')
            {
                placeStar(nav);
                $('#content').fadeOut(200, function() {
                    showContent(nav);
                });
            }
        });
    })

    if (location.hash != '')
    {
        $(window).trigger('hashchange');
    }

    // load landing content

    $(function() {
        $('#content').hide(function() {
            var landingdiv = $(document.createElement('div')).attr({id: 'landing'});
            landingdiv.html($('#hidden-landing').html());
            landingdiv.clone().appendTo('#interiors');
            $(this).fadeIn(200);
            });
    });
});

函数集内部（html，隐藏）{
变量i=$（“#内部”）；
//在清除/设置HTML之前重置滚动条位置
i、 向左滚动（0）；
i、 滚动顶部（0）；
//设置HTML（如果提供），否则为空
if（html）i.html（html）；
否则i.空（）；
//如果Hide为“true”，则隐藏元素`
如果（隐藏）i.隐藏（）；
}
功能显示内容（nav）{
if（$.browser.safari）//webkit浏览器
{ 
bodyelement=$（“body”）
}
其他的
{ 
bodyelement=$（“html，body”）
}
动画（{scrollTop:0}，300）；
设置内部（空，真）；
$（“#标题”）.hide（）；
$（'标题'）.empty（）；
$（'#landing'）.empty（）；
//检测文档窗口大小并使用适当的图像高度图像
if（$（window）.height（）<832）//文档窗口的大小，而不是浏览器窗口的大小
{//600px图像的阈值+5个标题行
var图像高度=500；
}
其他的
{
var imageHeight=600；
}
//显示内容，以便我们可以单独显示/隐藏内部和标题
$（“#内容”）.show（）；
如果（（导航==“关于”）| |（导航==“联系”））
{
setInteriors（null）；//用于快速后退/前进按钮混合
开关（导航）
{
案例“关于”：
setInteriors（$（'#hidden about'）.html（）；//从hidden div加载
打破
案例“联系人”：
setInteriors（$（'#隐藏联系人'）.html（））；
打破
}
$（'#interiors'）.css（'height'，'100%'）；//用于“about”和“contact”的尺寸
$（'#interiors'）.css（'width'，'645px'）；
$（'#interiors'）.css（'white-space'，'normal'）；
$（“#内部”）.fadeIn（200）；
}
//要做的事情：可能将两个类的内部分开，以便进行动态更改？
其他的
{
开关（图像高度）
{
案例500：
$（'#interiors'）.css（'height'，'520px'）；//画廊的尺寸
//滚动条额外20像素
打破
案例600：
$（'#interiors'）.css（'height'，'620px'）；
打破
}
$（#interiors'）.css（'width'，'100%）；
setInteriors（null）；//用于快速后退/前进按钮混合
$（“#内部”）.show（）；
nav=（location.hash）.substring（1）；//用于快速后退/前进按钮混合
$（'#caption'）.html（'
'+$（'#hidden-'+nav）.html（）+'
'）；//加载隐藏的字幕
$（'#caption'）.fadeIn（300）；//在图像之前显示标题
getImages=”http://www.shadowshapes.com/uttwerk/getImages.php?id=“+nav+”&height=“+imageHeight；
$.getJSON（getImages，函数（json）{
var max=json.length；
如果（最大值>0）
{
载荷图像（0，最大值，导航）；
}
函数loadImage（索引、最大值、导航）{
if（（location.hash）.substring（1）=nav）//在散列更改之前，加载当前nav
{
如果（指数<最大值）
{
var newimg=新图像（）；
$（newimg）.load（函数（）{
if（（location.hash）.substring（1）=nav）//在当前图像加载后
$('#landing, #interiors, #caption').empty();
$('#content').show()
$('#interiors').scrollLeft(0);
$('#interiors, #caption').hide();

$("#interiors").show(function(){
    setTimeout(function(){$(this).scrollLeft(0);},10);});
});