Tôi đã chỉnh sửa javascript để đặt lại giá trị scrollLeft/scrollTop trước khi ẩn/xóa/đặt HTML. Tôi đặt tất cả các hoạt động đó vào một hàm duy nhất để cố gắng tìm ra những gì đang xảy ra.
Tôi đã thử nghiệm điều này trong Firefox và có vẻ như để sửa chữa những vấn đề di chuyển, nhưng tôi đã không kiểm tra bất kỳ trình duyệt khác. Nó sẽ làm việc mặc dù.
Có vẻ như tôi đã đúng trong câu trả lời khác của tôi mà bạn cần phải thiết lập lại scrollLeft và scrollTop giá trị trong Firefox trong khi các phần tử với một tràn của auto được hiển thị với một màn hình của block mặc dù, vì nó dường như để khôi phục lại cái cũ các giá trị khi được hiển thị bất kể giá trị cuộn có thay đổi khi bị ẩn:
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);
});
});
});
Chà, điều đó rất lạ. Đoán tốt nhất của tôi là chỉ đơn giản là lấy phần tử và đặt scrollTop và scrollLeft về 0, theo cách này không nên phiền toái. btw, trang web đẹp! Tôi thích điều khiển băm. – Tom
Vâng, tôi đã thử thực hiện ScrollLeft trước đây. Tôi có thể xem lại một lần nữa. Plugin hashchange là tuyệt vời, eh ?. Tôi nên tặng một số tiền bia cho Ben Alman vì nó đã cứu tôi khỏi phải viết tất cả những thứ bỏ phiếu đó! – rcon