强制滚动固定元素?

时间:2018-09-05 12:15:03

标签: javascript html css

所以我有一个固定的元素,该元素仅在您单击某些内容时才会显示(单击图像以将其放大,它会显示该大元素)。我的问题是,即使由于所有内容都居中而不会溢出,我是否也可以只为该结构强制滚动条? 我试图查看互联网上的其他内容,但没有任何效果。如果有人可以提出一个好的解决方案,我将非常感激:)预先感谢, HTML看起来像

<div id="img-modal">
                                    <div class="img-info-holder">
                                        <img class="img-modal-content" alt="vitalsImg">
                                        <div id="reviewInfo">
                                            <div style="width:50%; display: inline-block; float: left;"><p style="text-align: left; padding-left: 10px;color:#000;";>{$r.display_name}</p></div> 
                                            <div class="reviews-social" style="width:50%; display:inline-block;">
                                                <div style="float: right; margin-right: 5px;max-width:32%"><a class="twitter-share-button"
                                                href="https://twitter.com/intent/tweet?text='{$r.review|ucfirst}', {$r.display_name}" data-share="twitter" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"> <img src="https://appsolve.io/img/apps/bundle/social-icons/twitter.png" alt="vitals-twitter-icon" class="vitals-reviews-social-icon" /> </div> </a>
                                                <div style="float: right; margin-right: 5px;max-width:32%"><a href="javascript:fbshareCurrentPage()" target="_blank" alt="Share on Facebook">
                                                    <img src="https://appsolve.io/img/apps/bundle/social-icons/facebook2.png" alt="vitals-fb-icon" class="vitals-reviews-social-icon" /></a> </div>
                                                <div style="float: right; margin-right: 5px;max-width:32%"> <a id="pinbtn" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fcollectionnies.com&media=http%3A%2F%2Fcollectionnies.com&description=Next%20stop%3A%20Collectionnies" data-pin-do="buttonPin" data-pin-config="beside"><img src="https://appsolve.io/img/apps/bundle/social-icons/pinterest1.png" alt="vitals-pinterest-icon" class="vitals-reviews-social-icon" /></a> </div>
                                            </div>
                                            <p style="text-align: left; padding-left: 10px; font-size:14px;">{$r.date_published|date_format}</p>
                                            <div class="vtls-star-rating" style="float:left;padding-left:10px;padding-right:100%;"><span class="vtls-empty-stars"><span class="vtls-full-stars" style="width: {$r.stars*$stars_height}px;"></span></span>
                                            </div> 
                                            <div class="vitals-review-in-box" style="text-align: left; padding-left: 10px"><p style="font-family:Times;">{$r.review|ucfirst}</p> </div> 
                                        </div>

css是

#img-modal {
    display: none;
    position: fixed;
    z-index: 10000000000;
    padding-top: 20vh;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(211, 211, 211, 0.9);
}

.img-modal-content {
    margin: auto;
    display: inline-block;
    max-width: 50%;
    border-radius:10px;
    -webkit-box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
    -moz-box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
    box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
    margin-right: 15px;


}



.v-close {
    position: absolute;
    top: 18vh;
    right: 10px;
    color: #fafafa;;
    font-weight: bold;
    cursor:pointer;
    text-align: center;
    font-size: 50px;
}

@media only screen and (max-width: 700px){

    .img-modal-content {
        max-width: 95%;
        width: 95%
        margin-right:0 !important;
    }

    .img-info-holder {
        margin-left:0 !important;
    }

    #reviewInfo {
        width: 95% !important;
        margin-top: 2% !important;
        margin-bottom:2% !important;
    }

}

#reviewInfo {
    margin: auto;
    display: inline-block;
    width: 40%;
    max-width: 500px;
    text-align: center;
    color: #fff;
    padding: 10px 0;
    height: 200px;
    vertical-align: top;
    background-color:#FFF;
    border-radius:10px;
    -webkit-box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
    -moz-box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
    box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);

}

.img-info-holder {
    text-align: center;

}

.vitals-review-in-box {
    color:#000;
    word-wrap:break-word;
}

#reviewInfo > p {
    margin-bottom:0 !important;
    color:#000;
    font-family: Times;

}

.vitals-reviews-social-icon {
    width: 35px;
    height: 35px;
}

0 个答案:

没有答案