问题＃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的信用证 - Horizontal One-Page site won't go "backwards" to previous DIV

问题＃2

如果向左或向右滑动，则会移动页面。我不要那个。将溢出设置为隐藏对滑动没有帮助。

理想情况下，如果用户向右或向左滑动足够的话，它会“快速”按下＃34;页面在所需的方向，然后推送正确的哈希值。如果他们没有足够的滑动，它会快速回到当前页面。

话虽如此，如果它根本不动，我会很高兴。我曾设想用户会使用菜单进行导航，只能上下滚动。

有点偏离主题

是否有人建议使用能够在iOS设备中模拟浏览器的桌面浏览器？我相信推动Android浏览器浏览的webkit是非常相似的，所以我想如果我能抓住那些用于测试的话，我会在这里杀死两只鸟。在另一个项目中，我注意到我的桌面版Safari似乎提供了与我在iOS设备上找到的截然不同的结果（绝对定位的元素在＆＃34; top / margin-top＆＃34方面表现不同;在每个相应的浏览器中）。

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

Answer 1

问题＃1

原来我没有正确安装Modernizr（没有在html标签中包含no-js类），一旦纠正，解决了我在某些股票Android上遇到的哈希问题浏览器。

在修复之后，我仍然遇到奇怪的滚动行为。通常，页面会滚动到所需的位置，然后跳回。经过进一步的研究，我发现了这个： Jquery Animate ScrollLeft doesnt work on ipad

这似乎解决了一些表现不佳的人不受欢迎的滚动行为，但在iOS设备上却没有。这可能与它有关，ScrollLeft and ScrollTop on Ipad using animate chain (jQuery)，但我已经找到了其他有用的东西（将在下面发布）。

据我所知，iOS设备（7+）会在任何scrollLeft动画之前自动滚动到顶部。我无法访问任何物理设备，但我可以访问iMac，在那里我能够获得iOS模拟器，观察不必要的滚动行为。我尝试取消链接两个滚动操作（左侧和顶部，因为大多数帖子会建议您尝试），但这并没有什么区别。

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

在我测试的时候，我意识到只通过向左滚动，我的脚本最终正常运行＆＃34;正确＆＃34;。

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

不完全是＆＃34;修复＆＃34; （浏览器表现不当，对我的好处＆＃34;好处＆＃34;，令人担忧），但我会接受它。

问题＃2

只是为了澄清，解决这个问题特别棘手，因为页面需要能够向左和向右滚动（水平布局和所有内容），但仅限于我想要它。

至于试图禁用刷卡，我真的很短暂。我最接近的是一个名为touchSwipe的插件;然而，这打破了太多（在一些移动浏览器中的CSS布局），我似乎无法重新启用非链接（＆＃39; a＆＃39;）资产的点击。

我最终做的是创建一个监视窗口水平滚动位置的函数，并在窗口改变时重新定位窗口。在某些浏览器中看起来有点儿马车，但似乎我已经接近制造“每个人”＃39;高兴。

编辑：将函数更改为更符合要求的window.scrollTo（），只需在我触发之前获取位置。 Haven没有测试过那种不喜欢它的浏览器（到目前为止，手指交叉）。

旁注

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

我被“调整大小窗口”＆＃39; Chrome的插件，并没有意识到其他浏览器的工作插件的可用性低下。所以，我创建了一个满20个左右不同比例的iframe的测试平台，设置为匹配最流行的设备尺寸。

当我开始使用移动设备尺寸时，我意识到浏览器的滚动条正在扭曲我的比例。我之前查看了自定义滚动条，所以我深入研究它以尝试在整个字段中均衡变量。

尝试了很多不同的插件后，就会出现问题。是我唯一可以正常工作的人（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();
    }

});

干杯。

随着时间的推移，我会更新，或者如果我找到了解决其中任何一个问题的更好解决方案。在此之前，我实际上没有编写任何编程经验（并且这不是所有＆＃34;我的＃34;）（更改选择器几乎是我的＆＃34;技能的范围＆＃34; ），请原谅任何明显的错误。

横向单页站点：Mobile-Webkit滚动＆amp;刷卡问题

问题＃1

问题＃2

1 个答案:

问题＃1

问题＃2

旁注

使用JS