美文网首页
移动端横向滚动

移动端横向滚动

作者: 王小妞闯天涯 | 来源:发表于2019-10-24 17:54 被阅读0次

    html:

    <div class="buy_type">

            <div class="buy_type_box " :class="{buy_type_select:selectIndex === index}" @click="selectBag(index)" v-for="(item,index) in bagData">

            </div>

          </div>

    css:

    .buy_type {

            margin-top: 40px;

            justify-content: center;

            white-space: nowrap;

            display: -webkit-box;

            overflow-x: scroll;

            overflow-y: hidden;

            -webkit-overflow-scrolling:touch;

            &_box {

              display: inline-block;

              background: $color_white;

              border: solid 0.2vh #E4E4E4;

              border-radius: 10px;

              width: 200px;

              position: relative;

              margin-left: 20px;

    }

    主要利用:

    -webkit-overflow-scrolling:touch;

    display: -webkit-box;

            overflow-x: scroll;

            overflow-y: hidden;

    实现横向滚动

    相关文章

      网友评论

          本文标题:移动端横向滚动

          本文链接:https://www.haomeiwen.com/subject/kdpdvctx.html