Question

我遇到的问题和情况类似于这个帖子中回答的那个：one page horizontal site not centered on resize，虽然我似乎无法让这个解决方案适合我。

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

查看http://dianeajax.maxsitedesign.com

我应该提一下它在Wordpress上运行，以防更改答案。如果有什么不清楚或我是否应该在某处粘贴代码，请告诉我;正如我所说，我知道我并不知道自己在做什么。善待。 :)

Answer 1

为了后人的缘故：

JS for NAV

$('.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 for RESIZE

$(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

保持内容以窗口大小为中心 - 水平滚动单页网站

1 个答案:

JS for NAV

JS for RESIZE