Question

我正在开发一个jQuery Mobile项目，我有一个可扩展的弹出窗口但是当我在弹出窗口中扩展文本时，它不会滚动。我检查了overflow: scroll以及溢出中的所有其他选项，但都没有。但是当我扩展文本时，我看到弹出窗口右侧出现一个条形图，但没有滚动条。

这是我尝试过的最后一个代码，但是效果不佳

$("#buttonTest").click(function() {
    $('#Popup').css('overflow', 'scroll');        
    $('#Popup').popup('open');
});

这是弹出窗口

<div data-role="popup" id="Popup" data-transition="flow">
    <div class="newsCards">
        <img src="images/back.svg">
        <h4> header</h4>
        <div class="newsFader">
            <!-- extended text which is hidden at first -->
        </div>
    </div>
</div>

Answer 1

我尝试通过创建弹出窗口并设置样式来复制您的用例，使测试可滚动的理想方法是仅使用css。这是我为文本容器采用的可滚动的newsFader类。

<style type="text/css">
    .newsFader {
        width: 80%;
        height: 50px;
        overflow: scroll;
        margin-left: auto;
        margin-right: auto;
    }
</style>

也许文本没有滚动因为没有定义容器的大小迫使它适应其内容。无论如何这是我尝试并正确滚动的弹出代码：

<div data-role="popup" id="Popup" data-transition="flow">
    <div class="newsCards">
        <img src="">
        <h4> header</h4>
        <div class="newsFader">
            <!-- extended text which is hidden at first -->
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

我希望它可以帮到你，Happy Coding！

scrollabe jqm popup不起作用

1 个答案: