水平一页网站：Mobile-Webkit滚动和滑动问题

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

问题＃1

如果您查看来自正版的Android浏览器或（更重要的是）iOS设备的链接，网站将不会滚动。 它做这个奇怪的烦躁/脉冲的事情，并没有去哪里。 如果你select了一个链接的方式，它有时会滚动，但它永远不会在正确的位置结束。

我相信这与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

如果您向左或向右轻扫，则会移动页面。 我不要那个。 设置溢出隐藏没有帮助刷卡。

理想情况下，如果用户向右或向左滑动足够多，就会在所需的方向上“捕捉”页面，然后推送正确的散列值。 如果他们没有足够的滑动，就会跳回到当前页面。

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

有点偏离主题

有没有人有一个桌面浏览器的build议，模拟iOS设备的浏览器？ 我相信推动股票Android浏览器的webkit是非常相似的，所以我认为如果我能拿到testing的话，我会杀死两只鸟。 在另一个项目中，我注意到我的Safari的桌面版本似乎提供了与我在iOS设备上发现的截然不同的结果（绝对定位的元素在各个浏览器中的“top / margin-top”方面performance不同）。

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

Answer 1

问题＃1

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

之后，我仍然遇到了奇怪的滚动行为。 通常，页面将滚动到所需的位置，但随后跳回。 进一步的研究，我碰到这个： jQuery的animationScrollLeft不工作在iPad上 。

这似乎解决了一些performance不佳的不良滚动行为，但不是在iOS设备上。 这可能与它有关， 使用animation链（jQuery）的Ipad上的ScrollLeft和ScrollTop ，但我已经找出了一些其他的工作（将在下面发布）。

据我所知，iOS设备（7 +）自动滚动到任何scrollLeftanimation之前。 我无法访问任何物理设备，但是我可以访问iMac，在那里我可以查看iOS模拟器并观察不需要的滚动行为。 我试图解开两个滚动行为（左和顶，因为大多数post会build议你试试），但这并没有什么不同。

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

在我testing的过程中，我意识到只要向左滚动，我的脚本就能够“正常”运行。

有趣的是，我注意到，浏览器将滚动到顶部自动前水平滚动到我的目标。 所以，如果他们更新他们的代码，使scrollLeft函数正确，我将不得不回去添加一个scrollTop函数。 就目前而言

不完全是一个“修复”（浏览器的行为不适合我的“利益”，令人担忧），但我会采取。

问题＃2

只是为了澄清，解决这个问题特别棘手，因为页面需要能够左右滚动（水平布局和全部），但只有当我想要的时候。

至于试图禁用刷卡，我真的是不足。 我到那里最近的是一个名为touchSwipe的插件; 然而，这太多了（CSS在一些移动浏览器的布局），我似乎无法重新启用非链接（'a'）资产的挖掘。

我最终做的是创build一个函数来监视窗口的水平滚动位置，如果窗口发生改变，则重新定位窗口。 在一些浏览器中似乎有点小错误，但是看起来我正在接近让每个人都快乐。

编辑：改变function更顺从的window.scrollTo（），只是在我开除之前取位置。 还没有testing过一个不喜欢它的浏览器（到目前为止， 手指交叉 ）。

边注

最后，当我进行RWDtesting时

我被Chrome的“调整窗口”插件所宠坏，并没有意识到其他浏览器的工作插件的可用性。 所以，我创build了一个满足20个不同比例的内嵌框架的testing平台，这个框架与最stream行的设备尺寸相匹配。

当我回到移动设备尺寸时，我意识到浏览器的滚动条正在扭曲我的比例。 之前我曾经看过自定义的滚动条，所以我深入研究它试图在整个领域均衡variables。

尝试了很多不同的插件之后，'nicescroll'是我能正常工作的唯一一个（ http://nicescroll.areaaperta.com/ ）。 如果你要使用它，一定要运行一个移动testing（ http://www.detectmobilebrowsers.com/ ），并且只能在非移动设备上运行（当然，这个脚本似乎失败了挑选一些移动浏览器，但总比没有好）。 我testing的所有移动浏览器已经有一个类似的滚动条（默认情况下），所以这是完全没有必要的（加上它打破了一些移动浏览器）。

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

---

干杯。

随着时间的推移，我会更新，或者如果我find更好的解决scheme的任何一个问题。 在这之前（我改变select器几乎是我的“技能”的范围），我没有任何编程经验，实际上写了我自己的代码（这不全是“我的”），所以请原谅任何明显的错误。