zoukankan      html  css  js  c++  java
  • HTML元素超出部分滚动, 并隐藏滚动条

    在customerList容器里面,brandItem超出部分滑动,并且隐藏滑动条 (项目需要 应用在移动端)

    <div  class="customerList" v-if="isShowCustomer==true">
          <div class="customerItem" v-for="brandItem in Brands" @click="getBrand(brandItem)">{{brandItem.BrandName}}</div>
    </div> 
    
    一,利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE
    .customerList {
        .px2rem(252);
        height: @px2rem;
        overflow-x: hidden;
        overflow-y: scroll;
      }
    
      .customerList::-webkit-scrollbar {
        display: none;
      }
    

    (仅实现超出部分滑动 可用css样式 overflow: auto;)

    二,利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式

    html部分:

    <div  class="customerList" v-if="isShowCustomer==true">
          <div>    
              <div class="customerItem" v-for="brandItem in Brands" @click="getBrand(brandItem)">{{brandItem.BrandName}}</div>
          </div>
    </div> 
    

    css部分:

    .customerList {
      /* 父容器设置高度, 并超出部分不显示 */
        .px2rem(252);
        height: @px2rem;
        overflow: hidden;
      }
    
     .customerList >div{
         /* 子容器比父容器高*/
             .px2rem(352);
              height: @px2rem;
              overflow-y: scroll;
    }
    
  • 相关阅读:
    LeetCode:33. Search in Rotated Sorted Array
    重拾 ACM-HDU 2000-2009
    hdu 1022 数据结构 stack模拟
    画椭圆
    声控灯
    VC++调用R语言
    Setup Factory打包时注册com dll
    折腾树莓派的一些总结
    老调重弹
    制作cpprefernce.chm
  • 原文地址:https://www.cnblogs.com/jessie-xian/p/11596737.html
Copyright © 2011-2022 走看看