横向一页站点：Mobile-Webkit滚动和滑动问题

Question

这是我正在使用的基本演示： http : //jsfiddle.net/3N8wY/9/

第1期

如果您从普通的Android浏览器或（更重要的是）iOS设备查看该链接，则该网站将不会滚动。 它做这种奇怪的烦躁/脉冲的事情，没有去任何地方。 如果您选择下行连接方式，它有时会滚动，但它永远不会出现在正确的位置。

我相信这与JS有关。 当我在手机上尝试时，我注意到它没有对所选链接的新值进行哈希处理。

JS

$(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);
    console.log($target);
    $('html, body').stop().animate({
        scrollLeft: $target.offset().left,
        scrollTop: $target.offset().top
    }, 900, 'swing');
});

JS信用- 水平的一页站点不会“退后”到以前的DIV

---

第2期

如果向左或向右滑动一点，它将移动页面。 我不要那个。 将溢出设置为隐藏无助于滑动。

理想情况下，如果用户向右或向左滑动足够多，它将沿所需方向“捕捉”页面，然后推送正确的哈希值。 如果他们滑动的次数不够，它将回到当前页面。

话虽如此，如果它根本不动，我将对此感到非常满意。 我已经预见到，用户将使用菜单进行导航，并且只能上下滚动。

有点题外话

有没有人建议在桌面浏览器上模仿iOS设备中的浏览器？ 我相信驱动普通Android浏览器的webkit非常相似，因此，如果可以进行测试，我想在这里杀死两只小鸟。 在另一个项目中，我注意到我的Safari桌面版似乎提供了与在iOS设备上发现的结果截然不同的结果（相对于每个浏览器中的“顶部/顶部”，绝对定位的元素的行为有所不同）。

非常感谢您的阅读和贡献！ 我非常感谢和感激。

Answer 1

第1期

原来，我没有正确安装Modernizr（在html标记中未包含no-js类），该问题一经纠正，就解决了我在某些常用Android浏览器上遇到的哈希问题。

解决此问题后，我仍然遇到奇怪的滚动行为。 通常，页面会滚动到所需位置，然后跳回。 经过进一步研究，我发现： Jquery Animate ScrollLeft在ipad上不起作用 。

这似乎可以解决一些性能不佳者的不良滚动行为，但不适用于iOS设备。 这可能与它有关， 使用动画链（jQuery）在Ipad上使用ScrollLeft和ScrollTop ，但是我发现了其他可行的方法 （将在下面发布）。

据我所知，iOS设备（7+）在任何scrollLeft动画之前会自动滚动到顶部。 我没有任何物理设备的访问权限，但是我有iMac的访问权限，在那里我可以使用iOS Simulator并观察到不必要的滚动行为。 我尝试取消两个滚动动作的链接（左和上，因为大多数帖子会建议您尝试），但这并没有什么不同。

它可能与我正在滚动的内容（即正文或html）有关，我在几篇文章中读到了这一点，但是弄乱了它并没有任何用处。

在测试的过程中，我意识到仅向左滚动脚本便可以“正常”运行。

有趣的是，我注意到浏览器将在水平滚动到目标之前自动滚动到顶部。 因此，如果他们更新其代码以使scrollLeft功能正常运行，我将不得不返回并添加一个scrollTop函数。 暂时...

并非完全是一个“修复程序”（令人担忧的是，浏览器无法正常使用我的“好处”），但我会接受。

第2期

只是要澄清一下，解决这一问题特别棘手，因为页面需要能够左右滚动（水平布局和全部滚动），但仅在我需要时滚动。

至于尝试禁止刷卡，我确实很短。 我最接近那里的是一个名为touchSwipe的插件。 但是，这样的操作太多了（某些移动浏览器中的CSS布局），而且我似乎无法重新启用非链接（'a'）资产的窃听功能。

我最终要做的是创建一个监视窗口水平滚动位置的函数，并在窗口更改时重新定位窗口。 在某些浏览器中似乎有一些小问题，但似乎我已经接近使“每个人”都高兴了。

编辑：将函数更改为更兼容的window.scrollTo（），只需在我启动它之前获取位置。 尚未测试不喜欢它的浏览器（到目前为止， 手指交叉了 ）。

边注

最后，当我进行RWD测试时...

我被Chrome的“调整大小窗口”插件宠坏了，却没有意识到其他浏览器的可用插件的乏味。 因此，我创建了一个包含20个左右不同比例iframe的测试平台，以匹配最流行的设备尺寸。

当我开始研究移动设备的尺寸时，我意识到浏览器的滚动条正在改变我的比例。 我之前曾研究过自定义滚动条，所以我重新研究了它，试图在整个字段中均等化变量。

在尝试了许多不同的插件之后，“ nicescroll”是我可以正常使用的唯一插件（ http://nicescroll.areaaperta.com/ ）。 如果要使用它，请确保运行移动测试（ http://www.detectmobilebrowsers.com/ ），并且仅在非移动设备上运行它（ 顺便说一句，此脚本似乎无法拾取某些内容）移动浏览器，但总比没有好。 我测试过的所有移动浏览器都已经有一个类似的滚动条（默认情况下），因此完全没有必要（而且会破坏某些移动浏览器）。

工作JS

$(document).ready(function() {

    var loadedTarget = $(window.location.hash);

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

    function repositionWin() {
        unbindWindow();
        var targetPosLeft = loadedTarget.offset().left;
        $(window).on('scroll', function(e) {
            var alteredPosLeft = $(window).scrollLeft();
            var alteredPosTop = $(window).scrollTop();
            if (alteredPosLeft != targetPosLeft) {
                window.scrollTo(targetPosLeft, alteredPosTop),
                unbindWindow(),  // MAY BE UNNECESSARY, IOS SCARED ME INTO IT, SAME AS BELOW 
                repositionWin();
            }           
        });
    }

    function browserResult() {
        if (jQuery.browser.mobile === true) {
            $('body').css({"overflow-x":"hidden","overflow-y":"scroll"});
            repositionWin();
        }
        else {
            setTimeout ((function(){
                $("html").niceScroll({
                    cursorcolor: '#231f20',
                    cursoropacitymax: '0.5',
                    scrollspeed: '100',
                    mousescrollstep: '50'
                });
            }), 300);
            setTimeout (repositionWin, 300);
        }
    }
    browserResult();

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

         // CODE SPECIFIC TO PROJECT (NAMELY FLEXSLIDER PAUSE/PLAY STUFF) OMITTED

        $(window).triggerHandler('hashchange');         
    });

});

$(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);
        }
    }


            // WAITING FOR OTHER ANIMATIONS TO COMPLETE SO THAT MOBILE DEVICES AREN'T TOO OVERLOADED

    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();
    }

});

---

干杯。

随着时间的流逝，或者如果我对这两个问题都找到了更好的解决方案，我都会进行更新。 在此之前，我实际上没有编写任何代码（这并不是全部都是“我的”）的编程经验为零（改变选择器几乎就是我的“技能”的程度），所以请原谅任何明显的错误。