水平单页网站:Mobile-Webkit滚动刷的问题
Horizontal One-Page Site: Mobile-Webkit Scrolling & Swiping Issues
下面是我正在使用的一个基本演示: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');
});
CREDIT FOR JS -横向单页网站不能"后退"到上一个DIV
问题# 2
如果你向左或向右滑动一点,它会移动页面。我不想那样。将溢出设置为隐藏对滑动没有帮助。
理想情况下,如果用户向右或向左滑动足够多,它将在所需的方向上"捕捉"页面,然后推送正确的哈希值。如果他们滑动不够,它会迅速回到当前页面。
话虽如此,如果它完全不动,我会很高兴的。我曾设想用户将使用菜单来导航,并且只能上下滚动。
有点跑题
有没有人有一个桌面浏览器的建议,密切模仿在iOS设备上的浏览器?我相信webkit驱动现有的Android浏览器是非常相似的,所以我想如果我能得到它进行测试,我就一举两得了。在另一个项目中,我注意到我的桌面版Safari似乎与我在iOS设备上看到的结果非常不同(绝对定位元素在每个浏览器中的"top/margin-top"表现不同)。
非常感谢您的阅读和贡献!我非常感激你。
第一期
原来我没有正确安装Modernizr(没有在html标签中包含no-js类),这一旦纠正,解决了我在一些库存Android浏览器上遇到的散列问题。
修复后,我仍然遇到了奇怪的滚动行为。通常,页面会滚动到所需的位置,但随后又跳回来。在进一步的研究中,我发现了这个:Jquery Animate ScrollLeft不能在ipad上使用
这似乎解决了一些表现不佳的设备不希望出现的滚动行为,但在iOS设备上却不行。这可能与它有关,ScrollLeft和ScrollTop在Ipad上使用动画链(jQuery),但我已经找到了一些其他的工作(将在下面发布)。
据我所知,iOS设备(7+)在任何scrollLeft动画之前都会自动滚动到顶部。我没有使用任何物理设备,但我有一台iMac,在那里我能够获得iOS模拟器,并观察到不必要的滚动行为。我试着将两个滚动操作(left &顶部,大多数帖子会建议你尝试),但这并没有什么不同。
它可能与我正在滚动的内容有关(即body或html),我在一些帖子中读到过,但是混乱的结果没有任何有用的结果。
当我在测试时,我意识到只要向左滚动,我的脚本最终就能"正常"运行。
有趣的是,我注意到浏览器会自动滚动到顶部在水平滚动到我的目标之前。因此,如果他们更新代码使scrollLeft函数正确,我将不得不返回并添加一个scrollTop函数。暂时……不完全是一个"修复"(浏览器的行为不适当的工作,我的"利益",令人担忧),但我会接受它。
问题# 2
只是澄清一下,这是特别棘手的解决这个问题,因为页面需要能够左右滚动(与水平布局和所有),但只有当我想要它。
至于试图禁用滑动,我真的很短。我得到的最接近的是一个叫做touchSwipe的插件;然而,这破坏了太多(某些移动浏览器中的css布局),而且我似乎无法重新启用非链接('a')资产的点击。
我最终做的是创建一个函数来监视窗口的水平滚动位置,并在窗口改变时重新定位窗口。在一些浏览器中似乎有一点错误,但似乎我接近让"每个人"高兴。
编辑:将函数更改为更兼容的window.scrollTo(),只需在我触发它之前获取位置。我还没有测试过不喜欢它的浏览器(到目前为止,祈祷)。
边注
最后,当我进行RWD测试时…
我被Chrome的"调整窗口大小"插件宠坏了,没有意识到其他浏览器的插件的可用性很差。因此,我创建了一个包含20个左右不同比例的iframe的测试平台,以匹配最流行的设备尺寸。
当我缩小到移动设备的尺寸时,我意识到浏览器的滚动条扭曲了我的比例。我以前研究过自定义滚动条,所以我再次深入研究它,试图在整个字段中平衡变量。
在尝试了许多不同的插件之后,' nicesscroll '是唯一一个我可以正常工作的(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();
}
});
欢呼。
我会随着时间的推移更新,或者如果我找到一个更好的解决方案。在此之前,我没有任何编写自己代码的编程经验(这并不全是"我的")(更改选择器几乎是我的"技能"的范围),所以请原谅任何明显的错误。
- Safari(Mac OS)上的jQuery平滑滚动问题
- 滚动以修复向上滚动的问题
- jquery平滑滚动问题
- 为什么不'我的窗口滚动事件根本没有启动.其他答案没有解决问题
- Wordpress中奇怪的滚动问题
- 无限滚动更改ID问题
- ajax显示隐藏滚动到最重要的问题
- jQuery Div滚动功能:IE中的问题
- CSS 溢出的滚动问题:滚动 HTML
- 显示比容器宽的文本,滚动时出现问题
- 单点高库存滚动条问题
- SlimScroll JQuery插件中的滚动条问题
- overflow-y:滚动导致JQuery出现问题
- 修复了从外部页面滚动到锚点时的页眉问题
- 平滑滚动并突出显示导航问题
- Jquery问题--滚动菜单
- CSS/Javascript菜单固定位置问题(滚动时)
- 关于页面加载的Javascript问题&滚动
- Jquery对话框chrome问题-滚动不可见时打开第二次
- 谷歌浏览器的问题:滚动到底部检测缩小