保持内容居中调整窗口大小 - 水平滚动一页网站

Question

我有一个与此线程中回答的问题类似的问题和情况：one page horizontal site not centered on resize，尽管我似乎无法让该解决方案为我工作。

我只是在学习 javascript/jQuery 并添加一些基本的响应能力，所以我有一个工作站点真是个奇迹。这是我的第一个水平滚动单页站点，不知何故（对我来说，很神奇）我已经启动并运行了 scrollTo 和 localScroll，但我希望看到内容仍然以调整大小为中心。如果您在带有图像的第一张幻灯片上，它会保持居中 - 但如果您在任何其他幻灯片（学分/卷轴/联系人）上，宽度都会发生变化并四处移动。

看看http://dianeajax.maxsitedesign.com

我应该提到它在 Wordpress 上运行，以防改变答案。如果有任何不清楚的地方或者我是否应该在某处粘贴代码，请告诉我；正如我所说，我知道我真的不知道自己在做什么。善待。 :)

Answer 1

为了后代：

资产净值的 JS

$('.main-nav-link').click(function(e) {
    e.preventDefault();
    var toTarget = $(this).attr('href');
    history.pushState(null, null, toTarget);
    $(window).triggerHandler('hashchange');
});

$(window).on('hashchange', function () {
    if(!window.location.hash) return;
    var $target = $(window.location.hash);
    $('html, body').stop(true,false).animate({
        scrollLeft: $target.offset().left}, 900, function() {
            $(this).stop(true,false).animate({scrollTop:0})
        });
});

调整大小的 JS

$(window).resize(function() {
    var stayHere = $(window.location.hash);
    $('html, body').stop(true,false).scrollLeft( stayHere.offset().left );
});

有关所用 CSS/HTML 的其他信息：Horizontal One-Page site won't go "backwards" to previous DIV