Question

您好我正在使用jquery mobile以及splitview插件
http://asyraf9.github.com/jquery-mobile/ 我无法解决的问题是，为什么splitview插件仅适用于满足以下条件的屏幕。

 var $query = $.mobile.media('screen and (min-width: 480px)') && ($.mobile.media('(-webkit-max-device-pixel-ratio: 1.2)') || $.mobile.media('max--moz-device-pixel-ratio: 1.2)'));
 $.support.splitview = ($query || ($.mobile.browser.ie && $(this).width() >= 480)) && $.mobile.ajaxEnabled;

splitview插件适用于所有屏幕，但是对于较小的屏幕存在一些不符合上述条件的滚动错误。它没有正确滚动。如果不满足这些条件，我们无法修复这些而不是完全不使用splitview插件是否存在保留这些条件的特定原因？请帮忙。

Answer 1

问题似乎是jquery.mobile.splitview.css中的这一行CSS（第75行）

-webkit-overflow-scrolling:touch;

如果你评论它滚动的bug会消失，但ul元素没有任何动力。

似乎是iOS5特定的规则，以启用本机动量滚动。见http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/

CSS修复

使页面以动量滚动

#search .ui-content {
 -webkit-transform: translate3d(0, 0, 0);
}

#search-list {
 position:  static;
 overflow:  scroll;
}

其中#search是page-id而#search列表是ul元素。但是现在好像左右滑动分别上下滑动。怪异。

JS Fix（推荐）

如果jquery.mobile.splitview.js在

下面进行更改，则在第527行

//if ($.support.touch && !$.support.touchOverflow) {
if($.support.touch){

这会强制使用后退代码来运行iScroll.js。

我认为JS修复现在效果更好。

注意：这是一个已知问题，有一些关于如何解决此问题的建议 - CSS3 property webkit-overflow-scrolling:touch ERROR

jquery mobile splitview：支持屏幕的问题

1 个答案: