css实现横向滚动与纵向滚动

横向滚动与纵向滚动实现的原理相同,即用div包裹着内容,然后给这个div设置竖向overflow:auto;

注:横向滚动需要设置具体的宽度,纵向滚动需要设置具体的高度,否则的话就不能实现

html如下:

  <div class="home_content_left">
          <div
        :class="[selectIndex===index?‘home_content_left_items_active‘:‘home_content_left_items‘]"
        v-for="(item,index) in list"
        :key="index"
        v-on:click="onClick(index)"
      >{{item.title}}</div>
    </div>

css如下:

.home_content_left {
  width: 25%;
  height: 100vh;;
  background: rgb(241, 241, 241);
  /* overflow-y: auto; */
  border-right:.5px solid rgb(214, 214, 214);
  overflow-y:auto;
}

  如果想要去掉滚轮:则设置如下属性即可:

::-webkit-scrollbar{
    display: none;
}

  

css实现横向滚动与纵向滚动

上一篇:20175133 于沛辰 Exp9 web安全基础实践


下一篇:html笔记: