javascript - scrollabe jqm 弹出窗口不起作用

Question

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

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

$("#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>

希望对您有所帮助，祝您编程愉快!