2

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

任何建议将不胜感激。

这是我的屏幕截图！

提前致谢。

在此处输入图像描述

4

2 回答 2

0

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

这是以下更改的结果 -> http://jsfiddle.net/X8yXe/17/。

首先，我将使用data-role="content"参数包装您的内容，以保持这种语义与在 jQuery Mobile中完成的方式相同。

<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);​
于 2012-08-25T06:58:08.540 回答
0

http://jsfiddle.net/X8yXe/7/通过添加位置：固定到标题和宽度 100% 你可以让它坚持。固定将使 div 浮动，因此表格不会出现在下方，而是在其下方。为了解决这个问题，我添加了第二个高度 div 来将桌子向下推。

position:fixed 适用于 Android 和 iOS 5，但早期的 iO​​S 版本不支持 position:fixed。

于 2012-08-22T19:32:21.067 回答