scrollabe jqm弹出窗口不起作用

Question

I am developing a jQuery Mobile project which i have an extendable popup in it but when i extent the text in the popup, it doesn't scroll. I have checked overflow: scroll and all the other options in overflow, but none worked. but when i extent the text i see a bar appears on the right side of the popup, but no scroll.

this is the last code i tried and did not work as well

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

and this is the popup itself

<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

I tried to replicate your use case by creating the popup and styling it, the ideal way to make the test scrollable is by using css only. This is my scrollable newsFader class i took for the text container.

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

Maybe the text was not scrolling beacuse the size of the container was not defined forcing it to adapt to its content. Anyway this is the popup code i tried and scrolled correctly:

<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>

I hope it helps you, Happy Coding!