【问题标题】:Horizontal scrolling fails with width=device-width iscroll水平滚动失败,width=device-width iscroll
【发布时间】:2012-12-03 01:58:24
【问题描述】:

此处的示例代码:http://pastebin.com/95z3pftQ

我正在尝试构建一个带有固定标题和“内容”部分的移动页面,该部分将填充外部(经过清理,但在其他方面是任意的)HTML。我需要使用iscroll 或类似的东西,因为我需要支持垂直/水平滚动和缩放,这没有原生的等效项。

问题在于,使用 width=device-width 元视口指令,移动版 Safari 会将所有块级元素的大小调整为屏幕宽度,而不考虑其内容的宽度,除非它们指定了宽度。 iscroll 然后查看容器的宽度(即屏幕的宽度),并没有意识到还有更多内容需要水平滚动。所以在这个例子中,div#container 在我的 iPhone 上的计算宽度是 290px,但table#really-wide-content 的计算宽度是 1000px。

在页面上的一个 div 内是否有某种禁用元视口指令的效果?请注意,我无法先验地知道内容有多宽,或者它的 html 结构是什么样的,但如果需要,我可以通过编程方式更改内联样式。

【问题讨论】:

    标签: jquery-mobile mobile-safari viewport iscroll4


    【解决方案1】:

    您能否在加载后的某个时间点设置 iScroll 的宽度,例如这个 JQuery 示例:

    $('#scroller').width(your_width);
    

    通过https://stackoverflow.com/a/13898458/1085891

    您是否可以在页面加载后按照此处的建议销毁并重新创建 iScroll:How to set dynamic width in iScroll for scroller?

    另外,你可以在加载后将视口宽度设置为width=device-width 吗?也许这将允许 iScroll 首先加载容纳内容。

    【讨论】:

    • 我最终直接设置了元素的宽度,尽管这个解决方案可能更简洁。我不知道先验宽度(问题的原因),但后来我了解了 element.scrollWidth。 developer.mozilla.org/en-US/docs/DOM/element.scrollWidth
    • 是的。 scrollWidth 正是我想要的。
    • 我问了一个类似的问题:stackoverflow.com/questions/13998682/… 我想知道这是否与您遇到的问题基本相同。
    • 您的回答不正确。我在问题中特别说我不知道​​元素的宽度,所以设置元素的宽度没有用,除非我能找到宽度。 (我在上面的评论中误读了您的答案,我以为您将宽度传递给 iscroll,但实际上您只是将 jQuery api 引用回给我。)
    • 我没有在页面渲染后尝试设置width=device-width,因为:(1)这可能会导致用户端出现抖动,(2)我已经找到了一些实际解决问题的方法问题,以及 (3) jquery-mobile 在设置固定标题时设置视口定义并覆盖该行为是一个巨大的黑客攻击。
    猜你喜欢
    • 2011-01-03
    • 2017-12-10
    • 2013-07-22
    • 1970-01-01
    • 2013-02-26
    • 1970-01-01
    • 1970-01-01
    • 2014-02-11
    • 2011-10-21
    相关资源
    最近更新 更多