自适应页面，滚动条设置

在做自适应页面时有遇到内容过多，需要页面手动滚动查看内容的需求，而自己引用的bs框架中会把滚动条的样式清除，所以需要手动写下css

html:

          <div class="scroler">
            <ul class="scrollbar-none">
              <li class="col-md-2 col-sm-4 col-xs-4 active">
                <p>阿拉伯语</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>生物信息学</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>舞蹈编导</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>连锁经营管理</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>瑞典语</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>海洋药学</p>
              </li>

              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>水产养殖教育</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>雕塑</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>蜂学</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>草业科学 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>大气科学</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>科技防卫</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>应用语言学</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>地球化学</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>朝鲜语</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>印刷工程</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>轻化工程</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>飞行技术 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>药事管理 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>精神医学 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>植物科学与技术 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>动物药学 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>国际文化交流 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>仿真工程 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>言语听觉科学 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>水务工程 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>火灾勘查</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>家政学 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>体育装备工程 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>物业管理 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>医学信息学 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>海洋管理 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>包装工程 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>网络工程 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>灾害防治工程 </p>
              </li>
              <!-- <a href="http://bj.xdf.cn/publish/portal24/tab13421/" target="_blank" class="col-md-2 col-sm-4 col-xs-12">
                <p>点击查看更多专业>></p>
              </a> -->
            </ul>
          </div>

css:

.scrollbar-none::-webkit-scrollbar {/*滚动条宽度设置*/
    /* width: 5px;height: 10px; */
    
}

.scrollbar-none::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  .scrollbar-none::-webkit-scrollbar:vertical {
    width: 12px;
  }
  .scrollbar-none::-webkit-scrollbar:horizontal {
    height: 12px;
  }
  .scrollbar-none::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
  }
  .scrollbar-none::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
  }