CH4-5(模組化)隱藏拉bar條

有時客戶的需求是選單固定在左右,當內容高度超過時,希望不顯示拉bar。 透過兩層div與css將有拉bar的內層往右推來隱藏

HTML

        <div class="over_hidden">
            <div class="col-sm-6 col-xs-12 detail">
              <!--這裏面放內容-->
            </div>
        </div>

CSS

/*內容外層設定高度來產生拉bar*/
.half_content .col-sm-6.detail{
    width: 100%;
    padding: 60px 60px 150px 30px;
    height:46.5vw;
    overflow-y: scroll;
    transform: translateX(16px);
}
/*最外層將多餘的隱藏,並將內容推回去*/
.half_content .over_hidden{
    overflow: hidden;
    margin-left: 45%;
    transform: translateX(-15px);
}

results matching ""

    No results matching ""