水平滚动后不应用主题

Question

在我的移动应用程序中，我的主题为：<div data-role="page" id="myPage" data-theme="b" >。我在内部div有一张桌子。 主题b被正确应用但是如果我想水平滚动则滚动后主题不适用。手段主题仅在滚动前应用于可见屏幕，滚动后没有主题。此问题仅适用于水平滚动，对于垂直滚动，它可以完美运行。

任何建议将不胜感激。

这是我的屏幕截图！

提前致谢。

Answer 1

http://jsfiddle.net/X8yXe/7/通过添加位置：固定到标题和宽度100％，你可以使它坚持。固定将浮动div，因此表格不会显示在下面但在字面上。为了解决这个问题，我添加了第二个高度div来推动桌子。

位置：已修复适用于Android和iOS 5，早期的iOS版本不支持位置：虽然已修复。

Answer 2

这是解决问题的一种方法，也解决了代码的其他一些方面。

以下是以下更改的结果 - ＆gt; http://jsfiddle.net/X8yXe/17/。

首先，我将使用data-role="content"参数包装您的内容，以便在jQuery Mobile中将此语义与the way things are done保持一致。

<div data-role="page" id="orderbookpage" data-theme="b" >
    <div data-role="header" align="center" data-theme="b">
        <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
        <h1>MyPage </h1>
        <a href="MainMenu.html"  data-icon="grid">Menu</a>
    </div>
    <div data-role="content" data-theme="b">
        <div id="portfoliowrapper" align="center"  data-theme="b"></div>
        <p>Some random content, so we can see the scroll in relation to other content. </p>
    </div>       
</div>

其次，您可以将以下CSS应用于#protfoliowrapper以实现包含的水平滚动div。

#portfoliowrapper {
    width:93%;  
    white-space: nowrap;
    height:40px;
    padding: 20px;
    overflow: auto;
    overflow-x: hidden; /* hide scrollbar */

    /* make it stand out */
    border: 1px solid #ccc;
    margin: 0px auto;
    background-color: #eef1f1;
    background-image: -webkit-gradient(linear,0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 1px 0 0 #fff inset, 0 1px 0 #fff inset;
}

第三，也是最后一个提示。你使用jQuery Mobile，为什么不使用它呢？为什么在加载jQuery时使用标准的javaScript？

而不是：

document.getElementById('portfoliowrapper').innerHTML = theader + tbody + tfooter;

你可以这样做：

$('#portfoliowrapper').append(theader + tbody + tfooter);​