Ионный 2 <ион-содержание> отключить прокрутку

Я пробовал несколько способов отключить прокрутку, в том числе с помощью position: fixed CSS position: fixed, атрибут overflow-scroll="false" и т.д., Но все методы не удалось.

Когда я провожу пальцем вниз, кнопки будут подниматься вверх, а пока я провожу пальцем вверх, кнопки будут падать, как эффект отскакивания.

Могу ли я узнать какие-либо решения этой проблемы? Огромное спасибо.

Ответ 1

Протестировано с ионной 3 (должно работать на ионной 2):

<ion-content no-bounce></ion-content>

Ответ 2

Я решил ту же проблему, используя CSS. (Ионик 3.6)

Шаг 1: В ion-content добавьте новый класс:

<ion-content class="no-scroll">

Шаг 2: В вашем CSS добавьте код ниже:

.no-scroll .scroll-content{
    overflow: hidden;
}

Ответ 3

Ионное содержание имеет класс под названием прокрутки-содержимого.

С учетом этого перейдите в app.css внутри src/app и добавьте:

app.css

.scroll-content{overflow-y: hidden;}

Это должно оставить ваше ионное содержимое без прокрутки, но я предпочел бы пользователя:

app.css

.scroll-content{overflow-y: auto;}

так как это позволяет содержимое прокрутки только в том случае, если содержимое страницы переполняет ионное содержание.

Ответ 4

Для отключения прокрутки в ионном содержимом может использоваться метод setScrollDisabled(). Вы должны выполнить следующие шаги.

В hello.ts

 import { app } from 'ionic-angular';

   public class HelloPage
   {
       constructor(private app: App) {};

        ngAfterViewInit(){
        this.app.setScrollDisabled(true);
      }
    }

Ответ 5

Если вы не хотите прокрутки, вам также может не понадобиться ионное содержимое, в моем статусе, например, я хочу использовать ионную сетку напрямую.

<!-- my-page.ts >
<ion-header>.......</ion-header>
<ion-grid class="has-header fixed-content">

</ion-grid>

и я добавил несколько scss для класса has-header:

ion-app {
    &.md {
        .has-header {
            margin-top: $toolbar-md-height;
        }
    }
    &.wp {
        .has-header {
            margin-top: $toolbar-wp-height;
        }
    }
    &.ios {
        .has-header {
            margin-top: $toolbar-ios-height;
        }
    }
}

Ответ 6

Как будто в этом issue и @shaneparsons указываются в комментариях, используя

<ion-content padding>
  <div ion-fixed>

    Your content here...

  </div>
</ion-content>

Решите проблему.

Надеюсь, что это поможет!

Ответ 7

В-пятых, перезагрузка моего ионного сервера решила мою проблему после добавления no-bounce

Ответ 8

Удивительно, no-bounce атрибут no-bounce работал над моим предыдущим проектом и не работает над новым проектом, над которым я сейчас работаю.

Я попробовал решение @rodrigo-chave с ion-fixed. Это решило проблему с прокруткой, но сделало мой контент маленьким (как будто был уменьшен). Добавление 100% CSS свойств ширины и высоты исправило это.

<ion-content no-bounce>
  <div ion-fixed style="height: 100%; width: 100%">
    ...
  </div>
</ion-content>