隐藏默认滚动条滚动页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    .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% + 17px);
      overflow-y: auto;
      text-align: center;
      color: #f2f2f2;
    }
    .box .item {
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      position: relative;
    }

    .box .item:hover {
        background: #ed686f;
        color: #fff;
    }

    .box .item:hover .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;
       }
</style>
<body>
    <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>
</body>
</html>

本文如未解决您的问题请添加抖音号：51dongshi（抖音搜索懂视），直接咨询即可。

隐藏默认滚动条滚动页面

相关资讯

热门阅读

热门话题

热门图文

为你推荐