cdk-virtual-scroll-viewport скрыть полосу прокрутки в Firefox версии 63.0 - PullRequest
Новая
       10

cdk-virtual-scroll-viewport скрыть полосу прокрутки в Firefox версии 63.0

0 голосов
/ 14 мая 2019

Я хочу скрыть полосу прокрутки элемента cdk-virtual-scroll, но не могу найти способ. это то, что я сделал до сих пор, но это не работает для Firefox. работает нормально в хроме.

это мой css файл 

cdk-virtual-scroll-viewport::-webkit-scrollbar {
    width: 0px;/* remove scrollbar space */
    background: transparent;/* optional: just make scrollbar invisible */
}

 cdk-virtual-scroll-viewport {
   -ms-overflow-style: none !important; // IE 10+
    scrollbar-width: none !important;
    overflow: -moz-scrollbars-none !important;
  }

это мой HTML-файл 

<cdk-virtual-scroll-viewport role="list" [itemSize]="95"><div *cdkVirtualFor="let site of sites;let i=index;let last = last;trackBy: trackByIdx" tabindex="{{i}}+1">
    <li class="mdc-list-item site-list-item" (click)="routeToSite(site)">
          <span class="mdc-list-item__text">
            <span class="mdc-list-item__primary-text">{{site.name | truncate:60:true }}</span>
            <span class="mdc-list-item__secondary-text">{{site.groupName}} - {{site.siteType.name }}</span>
            <span class="mdc-list-item__secondary-text">{{site.numOfUsers}} Users, {{site.numOfJsas }}
              JSAs</span>
          </span>
           </li>
       </div>
    </cdk-virtual-scroll-viewport>

Ответы [ 2 ]

0 голосов
/ 17 июля 2019

Просто дай 

.class {
    scrollbar-width: none;
}
0 голосов
/ 14 мая 2019

вам просто нужно добавить браузерный префикс для браузера Mozilla -moz-scrollbar-width: none;

см. Демонстрацию ниже 

ul{
  list-style-type: none;
  padding-left: 0;
  background-color: #f5f5f5;
  height: 50px;
  overflow: auto;
}
li{
  background-color: #ddd;
  display: block;
  margin: 2px 0;
}

ul::-webkit-scrollbar {
    width: 0px;/* remove scrollbar space */
    background: transparent;/* optional: just make scrollbar invisible */
}
ul {
   -ms-overflow-style: none; // IE 10+
    -moz-scrollbar-width: none;
    scrollbar-width: none;
    overflow: -moz-scrollbars-none;
  }
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Примечание Согласно https://caniuse.com/#feat=css-scrollbar это будет работать для FF 64 и выше

если вы все еще хотите использовать пользовательскую полосу прокрутки, вам следует воспользоваться плагином jquery

...