在做自適應(yīng)頁面時有遇到內(nèi)容過多，需要頁面手動滾動查看內(nèi)容的需求，而自己引用的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>生物信息學(xué)</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>舞蹈編導(dǎo)</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>連鎖經(jīng)營管理</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>海洋藥學(xué)</p>
              </li>

              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>水產(chǎn)養(yǎng)殖教育</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>蜂學(xué)</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>草業(yè)科學(xué) </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>大氣科學(xué)</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>科技防衛(wèi)</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>應(yīng)用語言學(xué)</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>地球化學(xué)</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>飛行技術(shù) </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>精神醫(yī)學(xué) </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>植物科學(xué)與技術(shù) </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>動物藥學(xué) </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>言語聽覺科學(xué) </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>水務(wù)工程 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>火災(zāi)勘查</p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>家政學(xué) </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>物業(yè)管理 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>醫(yī)學(xué)信息學(xué) </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>網(wǎng)絡(luò)工程 </p>
              </li>
              <li class="col-md-2 col-sm-4 col-xs-4">
                <p>災(zāi)害防治工程 </p>
              </li>
              <!-- <a  target="_blank" class="col-md-2 col-sm-4 col-xs-12">
                <p>點擊查看更多專業(yè)>></p>
              </a> -->
            </ul>
          </div>

css:

.scrollbar-none::-webkit-scrollbar {/*滾動條寬度設(shè)置*/
    /* 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;
  }