让 Ionic v4+ 无限滚动工作而不显示滚动条答案

【问题标题】：Getting Ionic v4+ infinite scroll working without showing scrollbars让 Ionic v4+ 无限滚动工作而不显示滚动条
【发布时间】：2021-07-10 12:07:24
【问题描述】：

有没有人想出如何在隐藏滚动条的同时实现无限滚动？

这是我用来隐藏滚动条的scss：

ion-content {
    --padding-bottom: 200px!important;
     --offset-bottom: auto!important;
    --overflow: hidden;
     overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }

这是html部分：

...
    <ion-infinite-scroll threshold="10px" (ionInfinite)="loadData($event)">
        <ion-infinite-scroll-content
          loadingSpinner="lines"
          loadingText="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

这是.ts：

import { Component, ViewChild,OnInit } from '@angular/core';
import { IonInfiniteScroll , IonContent,ModalController} from '@ionic/angular';
...
export class GlobalRankingsPage implements OnInit {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  @ViewChild(IonContent) content: IonContent;
...
loadData(event) {
    if(this.nextPage!=null){
      setTimeout(() => {

      this.globalRank(); //this just adds records to the dataList
      event.target.complete();
      if (this.dataList.length >= 150) {
        event.target.disabled = true;
      }
    
      }, 300);
    }else{
      event.target.disabled = true;
      event.target.complete();
    }
  }
 
  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }
...

如果我删除 css（所以滚动条显示）无限滚动工作正常。但是，如果我隐藏滚动条，则不会触发 loadData 函数。

谢谢！

【问题讨论】：

也许这个线程提供了一些帮助？ forum.ionicframework.com/t/…
该线程（忽略侮辱）提供了有关如何在 ionic 中隐藏滚动条的答案。但是，这样做会阻止无限滚动由于某种原因在我的工资等级之上触发。我目前有一个选择：实现此解决方案并松动无限滚动，或者拥有无限滚动但也显示滚动条。我想要无限滚动和隐藏滚动条。
但侮辱是最好的部分：-D
您找到解决方案了吗？ @IanM
@juanjotorres 不适用于桌面 - 我在移动设备上测试应用程序时注意到我的原始代码没有显示它们。

标签： ionic-framework ionic4 infinite-scroll ionic5

【解决方案1】：

尝试更新滚动条的宽度

::-webkit-scrollbar {
     background: transparent;
     display: none;
     width: 0;
}

【讨论】：

【解决方案2】：

在 AfterViewInit 中尝试此解决方法：


const main = async () => {
  const content = document.querySelector('ion-content');
  const styles = document.createElement('style');
  
  styles.textContent = `
    ::-webkit-scrollbar {
      width: 20px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey; 
      border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: red; 
      border-radius: 10px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #b30000; 
    }
  `;
  content.shadowRoot.appendChild(styles);
};

setTimeout(() => {
  main();
}, 250);

您可以设置滚动条的样式或直接隐藏它。

【讨论】：