如何在手机间隙中使用 iscroll javascript？

Question

提问by user

I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixedthat does not work in android 2 and 3 versions using cordova 2.1.0

我已经尝试为我的应用程序实现 iscroll java 脚本作为 CSS位置的补救过程：修复在使用cordova 2.1.0 的android 2 和3 版本中不起作用

I have copied the javascript of iscroll-lite from here

我从这里复制了 iscroll-lite 的 javascript

html code

html代码

<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
    <div id="header" class="header">
    <div id="header_title" class="header_title"> </div>
    <div id="abc" class="abc"><img src="img/abc.png""/>                     </div>
</div>
<div id="images" class="images"><img  name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description"  class="description">
<div id="title" class="title">
    <h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>  

<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>

The content of desc tag is going to overflow

desc 标签的内容即将溢出

CSS

.wrapper
{
    position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
     width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
    width:100%;  margin:0 auto; font-family:Arial, Helvetica, sans-serif; 
}
.header
{
    float:left; height:100%;  min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
     float:left; padding:0%; margin:0%;  height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%; 
}

.images
{
    position:relative; width:100%;
}
.description
{
     float:left; width:100%; overflow:auto;  height:100%; 

}
.title
{
    width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF; 
}
.desc
{
      width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px; 
}
.desc p
{
      margin-top:0; 
}
.footer
{
     width:100%;  position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
    text-indent:1%; float:left; text-align:center;  width:75%;  margin-top:2%;
}
.info
{
    width:25%; float:right; padding-top:1%;
}

USING iscroll

使用 iscroll

<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script> 


var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll() 
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady() 
{   
    scroll();
    ----
    ----

On scrolling,I just get the following

在滚动时，我只得到以下信息

W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.

PROBLEM:

问题：

It is is not scrolling.If at all it does after great effort on it but,it scrolls only once.I go back to the main page and return it does not scroll at all.

它不是滚动。如果它在经过很大努力之后确实可以滚动，但是它只滚动一次。我返回主页并返回它根本不滚动。

Please,Guide me!!

请指导我！！

EDIT: this I have tried in various combinations..replacing all the divs as li tag...the css wasn't effective. then used li tag within each div. No use... IT did not scroll.:

编辑：这我尝试了各种组合..将所有 div 替换为 li 标签...css 无效。然后在每个 div 中使用 li 标签。没有用......它没有滚动。：

<div id="wrapper">
<div id="scroller">
<ul>
  <div id="header " class="header ">
     <div id="header_title" class="header_title"> </div>
    <div id="xyz" class="xyz"><img src="img/xyz.png" onClick="xyz()"/></div>    </div>  </ul>

<ul>
      <div id="images" class="images"><img  name="slide" src="img/banner1.png" width=100%; />
   </div>
</ul>

<ul>
  <div id="param" class="param">
    <div id="abc" class="abc noSelect"> </div>
        <div id="def" class="def noSelect" > </div>
        <div id="ghi" class="ghi noSelect" > </div>
        <div id="ijk" class="ijk noSelect" > </div>
    </div>
</ul>

<ul>
  <div id="description"  class="description">
       <div id="title"  class="title">
    <h1><strong><li></li></strong></h1>
       </div>

    <div id="desc" class="desc">
    <p><li></li> </p>
    </div>
</div>

</ul>

Answer 1

回答by Filippos Karapetis

You don't seem to be following the structure that iScroll asks for. The iScroll page specifically mentions (note the bold text):

您似乎没有遵循 iScroll 要求的结构。iScroll 页面特别提到（注意粗体字）：

The optimal iScroll structure is:
<div id="wrapper">
  <ul>
      <li></li>
      ...
      ...
  </ul>
</div>
In this example the UL element will be scrolled. The iScroll must be applied to the wrapper of the scrolling area.
Important: only the first child of the wrapper element will be scrolled. If you need more elements inside the scroller you may use the following structure:
<div id="wrapper">
  <div id="scroller">
      <ul>
          <li></li>
          ...
          ...
      </ul>

      <ul>
          <li></li>
          ...
          ...
      </ul>
  </div>
</div>
In this example the scroller element will be scrolled (together with the two ULs).

最优的 iScroll 结构是：
<div id="wrapper">
  <ul>
      <li></li>
      ...
      ...
  </ul>
</div>
在此示例中，将滚动 UL 元素。iScroll 必须应用于滚动区域的包装器。
重要提示：只会滚动包装元素的第一个子元素。如果您需要滚动条内的更多元素，您可以使用以下结构：
<div id="wrapper">
  <div id="scroller">
      <ul>
          <li></li>
          ...
          ...
      </ul>

      <ul>
          <li></li>
          ...
          ...
      </ul>
  </div>
</div>
在这个例子中，scroller 元素将被滚动（与两个 UL 一起）。

You have:

你有：

<div id="wrapper" class="wrapper">
  <div id="wrapper-container" class="wrapper-container">
  ... head ...
  </div>

  ... (your main div here) ...
</div>

So your main div won't be scrolled by iScroller, you're only making the header div scrollable. Have a look at the iScroll demoand test it out first... does it work OK for your device? If yes, try to follow its structure.

所以你的主 div 不会被 iScroller 滚动，你只是让标题 div 可滚动。看看iScroll 演示并先测试一下……它对你的设备是否正常？如果是，请尝试遵循其结构。

Answer 2

回答by Faizul Hasan

In script code which you have posted, I have found a mistake. I do not know whether this mistake available in your actual file also or not. But thought to share that one first.

在您发布的脚本代码中，我发现了一个错误。我不知道您的实际文件中是否也存在此错误。但想先分享那个。

This is your script code.

这是您的脚本代码。

myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});

Mistake I have found

我发现的错误

.wrapperis the CSSrule name. You better to pass IDhere. Will assume your IDis iScrollWrapperthen enable the scroller in following format.

.wrapper是CSS规则名称。你最好从ID这里过去。将假设您ID是iScrollWrapper，然后按以下格式启用滚动条。

myScroll = new IScroll('iScrollWrapper', { scrollX:false , scrollY:true});

Now will see the best DOM structure(HTML format) for iScrollwhich will not trouble you and still W3C valid

现在将看到最好的DOM structure（HTML 格式），iScroll它不会给您带来麻烦并且仍然W3C valid

Option 1

选项1

<div id="iScrollWrapper" class="****** IMPORTANT_POINT_1 ******">
   <ul>
      <li>
          <YOUR_REMAINING_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
   </ul>
</div>

Option 2

选项 2

<div id="iScrollWrapper" class="****** IMPORTANT_POINT_1 ******">
   <ul>
      <li>
          <YOUR_ONE_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
      <li>
          <YOUR_ANOTHER_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
      <li>
          <YOUR_ANOTHER_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
   </ul>
</div>

Very first think you have to do is

首先认为你必须做的是

****** IMPORTANT_POINT_1 ******

The element to which you attach iScrollshould have non-static, non-fixed position type (Can use 'relative' or 'absolute'). That element should have heightin pixel(If you have min-heightor max-heightbut no **height**iScrollwill say sorry. It will not work)

您附加iScroll的元素应该具有非静态、非固定位置类型（可以使用“ relative”或“ absolute”）。该元素应该具有height的pixel（如果你min-height或者max-height，但没有**height**iScroll会说对不起，它不会工作）

Now will see how you can attach iScroll.

现在将看到如何附加 iScroll。

Good way of attaching iScrollis as follows (This what I have learnt when I apply iScrollfor elements)

好的附iScroll法如下（这是我申请iScroll元素时学到的）

If you are using Single Page Application (SPA)then

如果你正在使用Single Page Application (SPA)那么

if('undefined' != typeof iScrollerObject){
  iScrollerObject.destroy(); 
}
iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

If you make iScrollerObjectas your member variable in SPA application then use

如果您iScrollerObject在 SPA 应用程序中将其作为成员变量，则使用

var _this = this;
if(null != _this.iScrollerObject){
  _this.iScrollerObject.destroy(); 
}
_this.iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

For normal browser pages.

对于普通浏览器页面。

var iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

If you dynamically update the content then use checkDOMChanges : truein your options. If still it failed to update the scroller for dynamic DOM change then after you completing that dynamic DOM change call iScrollerObject.refresh();

如果您动态更新内容，则checkDOMChanges : true在您的选项中使用。如果仍然无法更新动态 DOM 更改的滚动条，则在您完成该动态 DOM 更改调用后iScrollerObject.refresh();

I have shared what I learnt about iScrollin my experience. If you need any please let me know. Please remember you are using iScroll liteversion which actually has less features than standard iScroll4. If you want to use iScrollversion then go with iScroll4.

我分享了我iScroll在经验中学到的东西。如果您需要任何请告诉我。请记住，您使用的iScroll lite版本实际上比标准功能少iScroll4。如果您想使用iScroll版本，请使用iScroll4.

如何在手机间隙中使用 iscroll javascript？

提问by user

回答by Filippos Karapetis

回答by Faizul Hasan

相关推荐

最近更新

标签

如何在手机间隙中使用 iscroll javascript？

提问by user

回答by Filippos Karapetis

回答by Faizul Hasan

相关推荐

javascript 如何杀死一个javascript函数？

javascript 获取 <h1> 的内容将它们转换为文本并设置为页面的标题

javascript 如何在选项卡重新加载时运行此脚本（chrome 扩展）？

JavaScript 中的define([, function ]) 是什么？

相关推荐

最近更新

标签