我遇到了一个奇怪的滚动条问题。我正在构建一个使用jQuery和PHP的页面，以便按顺序将图像动态加载到DIV中。此DIV是固定高度，但使用滚动条作为其可变宽度。问题是在动态刷新DIV后滚动条不会重置。因此，当用户滚动然后使用新内容刷新时，滚动条位置保持不变，而不是重新向左重置。
这似乎只发生在FF3中。滚动条在Chrome，Safari和IE8中完全重置。
对于每次刷新，DIV都被隐藏，清空，用CSS调整大小，然后依次附加图像。
我已尝试在white-space: normal之前重置nowrap，使用overflow，以及jQuery的scrollLeft无效。它在FF3中仍然表现得很奇怪，只有FF3。
单击缩略图，移动滚动条，然后单击另一个拇指。
感谢您的帮助！
答案 0 :(得分：5)
好的，在考虑了David M的建议之后，我明白了。由于#interiors是#content的孩子，因此它也被隐藏了。所以我必须首先show，然后再次设置scrollLeft然后hide。有点kludgy，但无论有用......
$('#landing, #interiors, #caption').empty();
$('#content').show()
$('#interiors').scrollLeft(0);
$('#interiors, #caption').hide();
关于FF3中的缓存数据，我仍然不清楚。保存那个，以备不时之需......
由于
答案 1 :(得分：3)
仅供参考，这是一个相关的Firefox错误：
答案 2 :(得分：0)
当我在firebug交互式控制台中键入它时：
var e = $('#interiors')[0]
e.scrollLeft = 0
e.scrollTop = 0
似乎正确地重置了滚动条。在设置display之前，该元素可能还需要block scrollLeft显示，但我不确定 - 我认为当我尝试执行此操作时，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
其次，您可以在使用scrollLeft或scrollTop之前将0 / $('#interiors').empty()值重置为$('#interiors').hide()，以便不保存值。< / p>
答案 3 :(得分：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);
});
});
});
答案 4 :(得分：0)
刚刚遇到同样的问题并通过设置超时 AFTER 解决了问题，#interiors已在页面上显示。
$("#interiors").show(function(){
setTimeout(function(){$(this).scrollLeft(0);},10);});
});