ionic 3.2 - 如何禁用离子含量的滚动？

Posted 2023-03-15

【中文标题】ionic 3.2 - 如何禁用离子含量的滚动？

【英文标题】：ionic 3.2 - How to disable scroll of ion-content?

【发布时间】：2017-05-25 08:27:57

【问题描述】：

我正在开发一个 Ionic 3.2 版本的应用程序。我在 ion-scroll 中有一个离子清新剂。我想禁用ion-content 的滚动，并希望在滚动ion-list 时在ion-scroll 中显示ion-refresher。但它失败了。

我试过no-bounce (<ion-content no-bounce>) 和disable-scroll (<ion-content disable-scroll>) 但内容仍在滚动 我尝试将ion-fixed 放入content 和div 中，就在content 的下方。但随后ion-refresher 不起作用。 我尝试了scroll="false"（就像在 ionic 1.0 中一样）但仍在滚动

代码下方；

    <ion-content scroll="false">
    <ion-scroll scrollY="true" style="width: 100% !important;height:30% !important"> 
        <ion-refresher (ionRefresh)="fill_data($event)">
          <ion-refresher-content pullingIcon="arrow-dropdown" pullingText=" 'pull_to_refresh' | translate " refreshingSpinner="circles"
            refreshingText=" 'refreshing' | translate ">
          </ion-refresher-content>
        </ion-refresher> 
        <ion-list>
          //data filling here
        </ion-list>
      </ion-scroll>
    </ion-content>

请帮帮我...

【问题讨论】：

如果你不想滚动那你为什么要在

里面写

嗨，我不想滚动整个内容。我只想在 ion-scroll 内滚动列表。 ion-scroll 下面会有其他组件不会滚动。

@Tony 你是说 ion-scroll 不滚动吗？

@suraj ion-scroll 正在滚动。表示 ion-scroll 和 ion-content 都在滚动。我只需要停止 ion-content 的滚动。

【参考方案1】：

这就是我刚才所做的 - 和你@Tony 一样的问题

有了这个 SCSS，我的列表会滚动，我可以在它下面有项目：

page-home 
  .scroll-content 
    overflow: hidden;
  

  ion-list 
    overflow-y: auto;
    max-height: 72vh;
  

我尝试使用 ionic scroll 和其他选项，但现在似乎都没有。

【参考方案2】：

.scroll-content 
    overflow-y: hidden !important;

这对我有用

【参考方案3】：

在页面的 sass 文件中使用..它对我有用

.scroll-content 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    display: block;
    overflow-x: unset;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    contain: size style layout;

【参考方案4】：

覆盖滚动内容、样式

scroll-content 
    overflow-y: auto;

我希望它对你有用

【讨论】：

您好，感谢您的回答。但不幸的是它没有解决。还在滚动。我添加了这样的内容：page-home scroll-content overflow-y: auto; 在 home.scss 中，它是当前页面的 css。并且还添加了内容（ ）。通过添加类而不添加尝试。

当我单独放置离子列表并覆盖滚动内容时，它不会滚动。但是当我添加 ion-scroll、ion-refresher 和 ion-list 组件时它会再次滚动。

【参考方案5】：

<ion-content>
   <ion-grid>
    <ion-row>
      <ion-col>
        <ion-scroll style="width:100%;height:100px" scrollY="true">
           <ion-list scroll="true">
          <ion-item *ngFor="let item of testData">
            <div>item</div>
          </ion-item>
        </ion-list>
        </ion-scroll>

      </ion-col>
    </ion-row>

  </ion-grid>
  <p>other data</p>
  <ion-list>
    <ion-item>
      1
    </ion-item>
      <ion-item>
      1
    </ion-item>
      <ion-item>
      1
    </ion-item>
  </ion-list>
</ion-content>

andin .ts 文件：

testData = [];

  constructor(public navCtrl: NavController) 
       for(let i =0;i<100;i++)
      this.testData.push(i);
    
  

检查这个plunk

【讨论】：

您好，谢谢您的回答。试过了，还是没修好。你用过离子2.0吗？我的版本是3.2。你能试试 3.2 吗？

不知道！它仍然无法在这里工作。当我单独放置离子列表并覆盖滚动内容时，它不会滚动。但是当我添加 ion-scroll、ion-refresher 和 ion-list 组件时它会再次滚动。

你可以在新项目中制作一个示例 plunker 或重新创建问题并上传到 git

【参考方案6】：

在您的 'src\app\app.scss' 中尝试以下样式代码

.scroll-content 
    overflow-y: auto !important;

【讨论】：

此代码错误。它应该被隐藏而不是自动。使用 auto 你可以滚动。

【参考方案7】：

您可以使用 Safari 调试 ios Ionic 应用程序，在调试时您会发现哪个是高效的。

.scroll-content 
    overflow-y: hidden !important;                                          

它将禁用 ion-content 的滚动并禁用 ion-list 的滚动。

div.scroll-content 
    bottom: 0px !important;                                                   

禁用离子内容的滚动更有效。它只阻止 ion-content 但 ion-list

【参考方案8】：

我已经解决了。很简单。

ion-content > div.scroll-content 
    overflow: hidden;

所以它只适用于离子含量。