Ответ 1
Протестировано с ионной 3 (должно работать на ионной 2):
<ion-content no-bounce></ion-content>
Я пробовал несколько способов отключить прокрутку, в том числе с помощью position: fixed
CSS position: fixed
, атрибут overflow-scroll="false"
и т.д., Но все методы не удалось.
Когда я провожу пальцем вниз, кнопки будут подниматься вверх, а пока я провожу пальцем вверх, кнопки будут падать, как эффект отскакивания.
Могу ли я узнать какие-либо решения этой проблемы? Огромное спасибо.
Протестировано с ионной 3 (должно работать на ионной 2):
<ion-content no-bounce></ion-content>
Я решил ту же проблему, используя CSS. (Ионик 3.6)
Шаг 1: В ion-content
добавьте новый класс:
<ion-content class="no-scroll">
Шаг 2: В вашем CSS добавьте код ниже:
.no-scroll .scroll-content{
overflow: hidden;
}
Ионное содержание имеет класс под названием прокрутки-содержимого.
С учетом этого перейдите в app.css внутри src/app и добавьте:
app.css
.scroll-content{overflow-y: hidden;}
Это должно оставить ваше ионное содержимое без прокрутки, но я предпочел бы пользователя:
app.css
.scroll-content{overflow-y: auto;}
так как это позволяет содержимое прокрутки только в том случае, если содержимое страницы переполняет ионное содержание.
Для отключения прокрутки в ионном содержимом может использоваться метод setScrollDisabled(). Вы должны выполнить следующие шаги.
В hello.ts
import { app } from 'ionic-angular';
public class HelloPage
{
constructor(private app: App) {};
ngAfterViewInit(){
this.app.setScrollDisabled(true);
}
}
Если вы не хотите прокрутки, вам также может не понадобиться ионное содержимое, в моем статусе, например, я хочу использовать ионную сетку напрямую.
<!-- 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;
}
}
}
Как будто в этом issue и @shaneparsons указываются в комментариях, используя
<ion-content padding>
<div ion-fixed>
Your content here...
</div>
</ion-content>
Решите проблему.
Надеюсь, что это поможет!
В-пятых, перезагрузка моего ионного сервера решила мою проблему после добавления no-bounce
Удивительно, 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>