Подтвердить что ты не робот

Как отключить или скрыть полосу прокрутки в Ionic 2 <ion-content>

У меня есть приложение Angular 2, завернутое в Ionic 2. Я использую <ion-tabs>, и внутри каждой вкладки есть <ion-content>. Содержимое в этой области должно быть прокручиваемым, но Ionic 2 добавляет полосу прокрутки, которую я не хочу отображать. Похоже, что при компиляции a <ion-content> имеет <scroll-content>, введенный в него. Я не хочу этого поведения.

Я пробовал много решений, которые работали в Ionic 1, но они не работают в Ionic 2:

  • Настройка scroll="false" на <ion-content>
  • Настройка scrollbar-y="false" на <ion-content>
  • Настройка overflow-scroll="false" на <ion-content>

  • Установка в css:

    .scroll-bar-indicator { display: none; }

и т.д...

Настройка на самом деле работает, чтобы удалить полосу прокрутки, но я бы предпочел не увлекать поведение браузера, а также удаляет полосы прокрутки из внутреннего содержимого тега <ion-content>, чего я не хочу.

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}
4b9b3361

ОТВЕТЫ

Ответ 1

У них есть класс для этого и он должен иметь возможность использовать:

 import { App } from 'ionic-angular';

 constructor(private app: App) {
   app.setScrollDisabled(true);
};

Смотрите обсуждение форума здесь. Но, похоже, он перестает работать после 2.0.0-rc.1. Я полагаю, что это связано с этим в их CHANGELOG, когда они изменили множество атрибутов на классы (т.е. scroll-content до .scroll-content), а app.setScrollDisabled(true); не был обновлен, чтобы отразить некоторые из этих изменений.

Если вы используете 2.0.0-rc.2 или 2.0.0-rc.3, я не верю, что <ion-content overflow-scroll="false"> или <ion-content ion-fixed> будет работать либо поэтому теперь создайте свой собственный класс.

Итак, если вы используете 2.0.0-rc.2 или 2.0.0-rc.3, вы можете это сделать, добавив это в свой .scss

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

и добавьте этот класс в ваш ion-content, как этот

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

Теперь просто следите за тем, чтобы это было исправлено в версиях после 2.0.0-rc.3.

UPDATE (2.0.0-rc.6): Похоже, что они сделали функцию App modules setDisableScroll частной (как видите здесь)

Также здесь полный список доступных функций для модуля App по версии:

  • 2.0.0-rc.1 (имеет setScrollDisabled)

  • 2.0.0-rc.2 (имеет setScrollDisabled)

  • 2.0.0-rc.3 (имеет setScrollDisabled)

  • 2.0.0-rc.4 (no setScrollDisabled, и нет альтернативы)

  • 2.0.0-rc.5 (по-прежнему нет setScrollDisabled или альтернативы)

  • 2.0.0-rc.6 (no setScrollDisabled, и нет альтернативы, но они намного больше отображают функции tirgger как viewWillUnload)

Поэтому, если они не вернут его, продолжайте использовать следующее:

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

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

Ответ 2

В ionic2 я видел, что overflow-y настроен на прокрутку по умолчанию, поэтому в файле src/app/app.scss попробуйте следующее:

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

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

Ответ 3

Вы можете переопределить стиль содержимого прокрутки в файле .scss.

scroll-content {
    overflow-y: auto;
}

или, тем не менее, вы можете установить overflow-y: hidden;

Ответ 4

Я использую Ionic 2 rc 0

Мое решение использует фиксированный ионами атрибут на div, который я назвал огибающей.

(в rc 0 вы не можете добавить ионно-ионное содержание)

<ion-content>
  <div id='envelope' ion-fixed>
  </div>
</ionic-content>

#envelope{
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

Ответ 5

Если вы просто хотите скрыть строку прокрутки и не хотите отключать прокрутку, используйте no-bounce attr:

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

благодаря larssn для своего комментария

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

<!-- 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

Ionic2 добавил setScrollDisabled с префиксом подчеркивания. Поэтому, если вы хотите получить доступ, просто используйте инъекционное переменное приложение и попробуйте установить this.app._setScrollDisabled (true). Я надеюсь, что это сработает.

Ответ 7

Добавьте этот css в свои стили,

Я извлек этот класс из элемента проверки, который содержит полосу прокрутки и элементы

ion-scroll.scroll-y .scroll-content::-webkit-scrollbar{
  display: none;
}

работал у меня

Ответ 8

использовать overflow-scroll = "false" в ионном содержимом