jquery mobile页面添加iscroll

最新推荐文章于 2025-09-08 17:59:21 发布

weixin_30877493

最新推荐文章于 2025-09-08 17:59:21 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mobilesd/archive/2012/10/23/2735440.html

本文介绍了解决低版本iOS设备浏览器不支持position:fixed样式的方案，通过使用iScroll库实现滚动效果，并提供了一段具体实现代码。

在低版本的iso设备上浏览器不支持position:fixed样式，找了很多解决方案之后选择了iscroll。

增加滚动功能的代码如下：

 1 (function($) {
 2     $(function() {
 3     
 4     function fixed(elm) {
 5         if (elm.data("iscroll-plugin")) {
 6             return;
 7         }
 8     
 9         elm.css({
10             overflow: 'hidden'
11         });
12     
13         var barHeight = 0; // 页头页尾高度
14         
15         // 设置页头样式
16         var $header = elm.find('[data-role="header"]');
17         if ($header.length) {
18             $header.css({
19                 "z-index": 1000,
20                 padding: 0,
21                 width: "100%"
22             });
23             barHeight += $header.height();
24         }
25     
26         // 设置页尾样式
27         var $footer = elm.find('[data-role="footer"]');
28         if ($footer.length) {
29             $footer.css({
30                 "z-index": 1500,
31                 padding: 0,
32                 width: "100%"
33             });
34             barHeight += $footer.height();
35         }
36     
37         // 设置内容区域样式、高度
38         var $wrapper = elm.find('[data-role="content"]');
39         if ($wrapper.length) {
40             $wrapper.css({
41                 "z-index": 1
42             });
43             $wrapper.height($(window).height() - barHeight);
44             $wrapper.bind('touchmove', function (e) { e.preventDefault(); });
45         }
46     
47         // 设置滚动区域
48         var scroller = elm.find('[data-iscroll="scroller"]').get(0);
49         if (!scroller) {
50             $($wrapper.get(0)).children().wrapAll("<div data-iscroll='scroller'></div>");
51         }
52         
53         // 添加滚动条
54         var iscroll = new iScroll($wrapper.get(0), {
55             hScroll        : false,
56             vScroll        : true,
57             hScrollbar     : false,
58             vScrollbar     : false,
59             fixedScrollbar : true,
60             fadeScrollbar  : false,
61             hideScrollbar  : true,
62             bounce         : true,
63             momentum       : true,
64             lockDirection  : true,
65             checkDOMChanges: true,
66             onBeforeScrollStart: function (e) {
67                 var target = e.target;
68                 while (target.nodeType != 1) target = target.parentNode;
69 
70                 // 解决添加iscroll后输入框的问题
71                 if (target.tagName != 'SELECT'&& target.tagName !='option'&& target.tagName !='option' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
72                     e.preventDefault();
73                     e.stopPropagation();
74                 }
75         });
76         elm.data("iscroll-plugin", iscroll);
77         
78         window.setTimeout(function(){iscroll.refresh();}, 200);
79     }
80     $('[data-role="page"][data-iscroll="enable"]').live("pageshow", function() {
81         fixed($(this));
82     });
83     if ($.mobile.activePage.data("iscroll") == "enable") {
84         fixed($.mobile.activePage);
85     }
86     
87     });
88 })(jQuery);

除了引用jquery、jquerymobile、iscroll外，使用iscroll的页面需要在data-role="page"所在标签添加data-iscroll="enable"：

<div data-role="page" id="ann" data-iscroll="enable">
    <!-- 省略 -->
</div

转载于:https://www.cnblogs.com/mobilesd/archive/2012/10/23/2735440.html