Question

快速背景故事：

我让一切都运转良好，但过了一段时间后，我发现它不再正常运作。返回“页面”的能力对我来说非常重要，因此我着手撤消我最近所做的任何更改。这不起作用，所以我决定重新创建框架（希望在内容中找到麻烦点），但问题仍然存在。我已将代码简化为以下基础知识。

我曾经能够点击后退按钮，我会立即被带到前一个面板。现在，除了“#page_name”被更改并且当前面板移动1px之外没有任何反应。如果我点击了一些链接（从而存储了更多的历史“踪迹”），那么一旦我再次点击后退按钮，我终于回到状态，但不是回到正确状态。

这是一个小提琴：http://jsfiddle.net/gz9nW/

JQ

$(document).ready(function(){
    $('.main-nav').on('click',function (e) {
       e.preventDefault();

       var target = $(this).attr("href");
       $target = $(target);

       $('html, body').stop().animate({
           'scrollLeft': $target.offset().left,
           'scrollTop': $target.offset().top
       }, 900, 'swing', function () {
           window.location.hash = target;
       });
   });
});

CSS

html {
font: 100% 'PT Sans', sans-serif;
height:100%;
width:100%;
margin:0%;
padding:0%;
}
body {
    font-size:1.25em;
    width:100%;
    margin:0%;
    padding:0%;
    overflow:hidden;
}

    header {
        width:100%;
        position:fixed;
        z-index:5000;
        top:0%;
        left:0%;
        padding:0%;
        margin:0%;
        background:silver;
        }


    /*################################ NAV ################################*/

        nav ul {
            list-style:none;
        }
            nav ul li {
                display:inline;
                margin-right:5px;
            }


/*################################ WRAPPER ################################*/

    .wrapper {
        width:1000%; /* #PAGES X 100% */
        height:100%;
    }

/*################################ PAGES ################################*/

        .page-container {
            width:10%; /* 1 / #PAGES */
            display:inline-block;
            vertical-align:top;
            padding:0%;
            margin:0%;
            margin-right:-5px;
        }
            .page-container:nth-child(even) {
                background:lightgreen;
            }
            .page-container:nth-child(odd) {
                background:lightblue;
            }
            .page-contents {
                padding:10% 0%;
                width:61%;
                margin-left:auto;
                margin-right:auto;
                background:grey;
            }

HTML

<body>
    <header>
        <nav>
            <ul>
                <li><a class="main-nav" href="#home">Home</a></li>
                <li><a class="main-nav" href="#products">Products</a></li>
                <li><a class="main-nav" href="#services">Services</a></li>
                <li><a class="main-nav" href="#quote">Quote</a></li>
                <li><a class="main-nav" href="#about">About</a></li>
                <li><a class="main-nav" href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div class="wrapper">
        <div class="page-container" id="home">
            <div class="page-contents">
            home
            </div>
        </div>
        <div class="page-container" id="products">
            <div class="page-contents">        
            products
            </div>
        </div>
        <div class="page-container" id="part-list">
            <div class="page-contents">        
            part list catalog
            </div>
        </div>        
        <div class="page-container" id="services">
            <div class="page-contents">        
            services
            </div>
        </div>
        <div class="page-container" id="quote">
            <div class="page-contents">        
            quote request
            </div>
        </div>
        <div class="page-container" id="about">
            <div class="page-contents">        
            about
            </div>
        </div>
        <div class="page-container" id="contact">
            <div class="page-contents">        
            contact page
            </div>
        </div>
        <div class="page-container" id="inquiries">
            <div class="page-contents">        
            solution inquiries
            </div>
        </div>
        <div class="page-container" id="news">
            <div class="page-contents">        
            news
            </div>
        </div>
        <div class="page-container" id="legal">
            <div class="page-contents">        
            legal info
            </div>
        </div>
    </div>
</body>

这对这个项目来说是一个巨大的打击，因为这个特定的功能是我追求的。任何帮助将不胜感激！

Answer 1

这可以解决您的问题：

DEMO

$(document).ready(function () {
    $('.main-nav').on('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().animate({
        scrollLeft: $target.offset().left,
        scrollTop: $target.offset().top
    }, 900, 'swing');
});

Answer 2

我想添加这个，以便那些在使用Wolff代码时遇到跨浏览器合规性问题的人可能会因为[...经销商的选择]而感到不安的

返回首页问题

有些浏览器在尝试返回主页时不会玩得很好，因为它没有哈希值。

主页哈希修复

function hashHome() {
    var currentHash = location.hash;
    var homeHash = '#home';
    if (currentHash == '') {
        history.pushState(null, null, homeHash);
    }
}
hashHome();

Webkit Simultaneous Scrolling Issue

一些webkit浏览器中的一个巨大问题，特别是移动版（阅读iOS !!!），当你同时水平和垂直滚动时，你最终得到的是一个让人感到困惑的混乱，让你回到起步的地方。非常具有破坏性，而且非常令人困惑。

我最初认为这是因为浏览器没有散列新值，但我后来意识到新值已存在，只是没有＆＃34;报告＆＃34;到视口。 iOS地址栏（7+）只有在点击地址栏后才会显示更改（DOI！哎呀，应该首先尝试......）我弄清楚了吗？叫我疯了，但如果你的代码依赖于一件事（新的哈希值），并且那件事情并没有明显发生，你可能会认为（就像我做的那样）代码不起作用的原因是因为你看到＆＃34;看到＆＃34;没有发生。

有关完整说明： Horizontal One-Page Site: Mobile-Webkit Scrolling & Swiping Issues

点击功能与Wolff相同。

跨浏览器修复

$(window).on('hashchange', function() {

    if(!window.location.hash) return;
    var target = $(window.location.hash);
    var targetHash = window.location.hash;

    var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );

    var currentPosition = $(window).scrollLeft();

    var targetPosLeft = target.offset().left;

    var targetPosTop = target.offset().top;

    function unbindWindow() { $(window).unbind('scroll'); }

    function repositionWin() {
        unbindWindow();
        $(window).on('scroll', function() {
            var alteredPosLeft = $(window).scrollLeft();
            var alteredPosTop = $(window).scrollTop();          
            if (alteredPosLeft != targetPosLeft) {
                window.scrollTo(targetPosLeft, alteredPosTop),
                unbindWindow(),
                repositionWin();
            }           
        });
    }

    function fadePages() {
        if (targetPosLeft == currentPosition) {
        }
        else {
            function fadePageOut() {
                $('.page-container').stop(true,false).animate({
                    opacity: "0.25",
                    transition: "opacity 0.1s 0.0s ease"
                });
            }
            function fadePageIn() {
                $('.page-container').stop(true,false).animate({
                    opacity: "1.0",
                    transition: "opacity 0.3s 0.0s ease"
                });
            }
            fadePageOut();
            setTimeout (fadePageIn, 900);
        }
    }

    function pageChange() {
        if (jQuery.browser.mobile === true) {
            if (iOS === true) {
                unbindWindow();
                $('html,body').stop(true,false).animate({
                    scrollLeft: targetPosLeft}, 1400);
                    setTimeout (repositionWin, 1500);
            }
            else {
                unbindWindow();
                $('html,body').stop(true,false).animate({
                    scrollLeft: targetPosLeft}, 1200, function() {
                        $(this).stop(true,false).animate({
                            scrollTop: targetPosTop
                        }, 200, repositionWin);
                });
            }
        }
        else {
            fadePages();
            unbindWindow();
            $('html,body').stop(true,false).delay(100).animate({
                scrollLeft: targetPosLeft,
                scrollTop: targetPosTop
            }, 1300, repositionWin);
        }
    }   
    if ($('#mini-site-menu-button-container').is(':visible') === true && $('#main-menu-wrapper').hasClass('show-main-menu') === true) {
        setTimeout (pageChange, 300)
    }
    if ($('.footer-container').is(':visible') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('.form-instructions-wrapper').hasClass('expand-form-instruct') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('.quick-quote-container').hasClass('toggle-open') === true) {
        setTimeout (pageChange, 500)
    }
    if ($('#mini-site-menu-button-container').is(':visible') === false && $('.footer-container').is(':visible') === false && $('.form-instructions-wrapper').hasClass('expand-form-instruct') === false && $('.quick-quote-container').hasClass('toggle-open') === false) {
        pageChange();
    }
    if ($('#main-menu-wrapper').hasClass('show-main-menu') === false && $('.footer-container').is(':visible') === false && $('.form-instructions-wrapper').hasClass('expand-form-instruct') === false && $('.quick-quote-container').hasClass('toggle-open') === false) {
        pageChange();
    }

});

附加说明

我删除了大部分附加代码，但是将条件语句留在了最后，以显示如何在移动网站上调用页面更改。根据您选择允许用户浏览页面的方式（我选择从左侧弹出我的菜单，因此＆＃34;切换打开＆＃34;），您将要允许其他动画在触发滚动动画之前完成的时间。对于大多数移动设备来说，一次处理所有设备往往很多。我仍然太绿，无法理解动画是如何排队的，所以这就是我解决它的方式。

我还添加了一个在页面容器滚动时淡化页面容器的功能。如果你从网站的一端走到另一端，那么在这么远的地方就会有相当多的腿部工作。那些嗖嗖的内容可能有点令人不快。褪色似乎有点沉闷，我敢说它还增加了一些东西。

最后，对于启用触摸的设备，我添加了一个功能，可以在页面更改之间监视和更正水平滚动位置。通过在手机上轻扫可以很容易地左右滚动，所以看起来很有必要。

水平的单页网站不会“倒退”到之前的DIV

2 个答案:

返回首页问题

Webkit Simultaneous Scrolling Issue