Question

我使用CSS创建了一个弹出窗口，当我在移动设备上查看时，我无法向下滚动。

.popup {
    position: fixed;
    left: 0;
    right: 0;
    top: 20%;
    width: 100%;
    max-width: 500px;
    margin: auto;
    background: #fff;
    padding: 40px;
    text-align: center;
    box-shadow: 0 0 90px #aaa;
    z-index: 410;
}

<div class="popup">
  <h2>Login</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nulla facere, velit fuga. Natus suscipit, vel non, quas ullam accusamus eius at unde consequatur quo, quaerat. Quibusdam provident sunt adipisci, perspiciatis doloribus, porro consectetur, libero ad ipsa quo error nihil. Nisi, laboriosam illum sapiente enim exercitationem! Expedita quod, aliquid corporis eveniet veritatis harum eos ad minus eligendi a amet ipsam at neque saepe excepturi inventore nobis consequuntur magnam sint quas perspiciatis ratione ea tenetur facilis fugit. Ex consectetur sequi voluptas odio unde, dolorum amet, non eius minima eaque rerum, deleniti repellendus sunt accusantium culpa explicabo mollitia molestiae nobis! Architecto deserunt necessitatibus maxime. Nulla quis maxime veritatis reprehenderit aut, velit voluptatibus suscipit harum consequuntur atque doloribus fuga expedita ab laboriosam veniam animi, similique quo? Illum nisi odit voluptatum corporis accusantium ab, libero, dolorum nesciunt maiores quasi alias. Dolore hic, vero. Cupiditate velit error praesentium tempore consequatur ipsum repellat eaque ex, tenetur, saepe odit magnam omnis! Mollitia cum nesciunt quibusdam eos ea voluptas delectus doloribus ipsam nemo quisquam numquam ratione hic accusamus animi perferendis, qui laudantium dolorem nostrum. Voluptatum eveniet consequatur laudantium asperiores, quia esse explicabo nemo nam repellat voluptas ab dolorem maxime reiciendis nostrum, libero non minima? Sint sed aliquid dignissimos!</p>
</div>

预览：https://jsfiddle.net/ea1grfqr/

Answer 1

下面我给出了HTML中滚动条的代码，看看是否允许看到整个弹出窗口：

<div id="" style="overflow-y: scroll; height:400px;">

您需要根据自己的喜好更改高度。

Answer 2

需要height例如50%，然后使用overflow: auto;

适用于position:fixed;

.popup {
        height: 50%;
        overflow: auto;
        position: fixed;
        left: 0;
        right: 0;
        top: 20%;
        width: 100%;
        max-width: 500px;
        margin: auto;
        background: #fff;
        padding: 40px;
        text-align: center;
        box-shadow: 0 0 90px #aaa;
        z-index: 410;    
    }

Answer 3

由于它是一个弹出窗口，我假设// add this to after your usual tracker ga('create', 'UA-XXXXX-Y', 'auto', 'partnerTracker'); ga('partnerTracker.set','campaignName',<value of utm_campaign2>) ga('partnerTracker.set','campaignMedium',<value of utm_medium2>) ga('partnerTracker.set','campaignSource',<value of utm_source2>) ga('partnerTracker.send','pageview')不一定是position。只需将fixed更改为position即可。 Here's more about positioning

absolute

.popup {
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    width: 100%;
    max-width: 500px;
    margin: auto;
    background: #fff;
    padding: 40px;
    text-align: center;
    box-shadow: 0 0 90px #aaa;
    z-index: 410;
}

CSS - 使固定模态响应

3 个答案: