純 css 實現 PC 端無滾動條滾動樣式分享
阿新 • • 發佈:2018-12-30
由於接觸過各種後臺管理平臺開發,我們的開發介面一般左側導航欄,右側內容區域。在左側呢一旦超出高度在不同的瀏覽器就會顯示滾動條。嚴重影響頁面美觀。在這裡呢主要是講的css實現 PC 端無滾動條滾動樣式。下面直接上程式碼:
- html:
<div class="box-wrapper"> <div class="box"> <div class="item">Home <span class="caret"></span></div> <div class="item">Phthon</div> <div class="item">React</div> <div class="item">Vue <span class="caret"></span></div> <div class="item">Java</div> <div class="item">Html5</div> <div class="item">Javascript</div> <div class="item">VuePress</div> <div class="item">Bootstrap</div> <div class="item">Jquery</div> <div class="item">Home</div> <div class="item">Order</div> <div class="item">Session</div> <div class="item">Preety</div> <div class="item">Java</div> <div class="item">Html5</div> <div class="item">Javascript</div> <div class="item">VuePress</div> <div class="item">Bootstrap</div> <div class="item">Jquery</div> </div> </div>
- scss:
.box-wrapper { width: 100px; background: #009688; position: fixed; top: 0; left: 0; bottom: 0; overflow: hidden; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .8); } .box { height: 100%; width: calc(100% + 7px); overflow-y: auto; text-align: center; color: #f2f2f2; } .box .item { height: 40px; line-height: 40px; cursor: pointer; position: relative; &:hover { background: #ed686f; color: #fff; .caret { transform: rotateZ(180deg); } } & .caret { width: 0; heihgt: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #f2f2f2; display: inline-block; position: absolute; top: 17px; right: 10px; transition: all .2s; } }
- 效果展示:
最後總結:其中的原理是外層限制了寬度並且設定超出隱藏,然而我們在內層寬度增加17px,滾動條則顯示在增加的17px裡面。所以有滾動條的時候就不會顯示出來。~~