Ionic 4: как скрыть полосу прокрутки в ion-content

В Ionic 4 вы должны использовать следующее, потому что Ionic использует теневой DOM:

глобальный.scss

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

и на странице

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

Спасибо @ростислав

Ваше решение даже не предлагает WebStorm и не рисует желтым подчеркиванием в значении предупреждения, но у меня работает и работает, это круто :)

решение: добавьте эти строки как в global.scss, так и в variables.scss:

::-webkit-scrollbar, *::-webkit-scrollbar {
  display: none;
  overflow: hidden;
}

ion-content {
  overflow: hidden;
  --overflow: hidden;
}

.scroll-content {
  overflow: hidden;
}

ВНИМАНИЕ:, затем очистите кеш браузера и обновите страницу, это здорово!

но не забывайте, что прокрутка отключена на всех страницах, добавьте этот код только в файл .sccs страниц, которые не нужно прокручивать!

::-webkit-scrollbar, *::-webkit-scrollbar {
  display: none;
  overflow: hidden;
}

ion-content {
  overflow: hidden;
  --overflow: hidden;
}

.scroll-content {
  overflow: hidden;
}
  ion-infinite-scroll.md.infinite-scroll-enabled.hydrated {
      overflow: scroll!important;
      height: 100%!important;
    }

Из-за того, что Ionic использует теневой DOM для ионного контента, следует отключить прокрутку в элементе теневого DOM и после этого сделать ионный контент своей собственной прокруткой, а затем скрыть полосу прокрутки для ионного контента. Ионный контент результата со скрытой рабочей полосой прокрутки. Необходимо использовать Пользовательские свойства CSS. Добавьте стили в глобальную область.

ion-content {
  // overwrite inline styles
  --offset-bottom: auto!important;
  --overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}

Вот взлом? https://github.com/ionic-team/ionic/issues/17685

<ion-content>
<div style = "background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>

Рефакторинг решения @Sergey Oleynikov, и он отлично сработал для меня

ion-content {
  // overwrite inline styles
  // --offset-bottom: auto !important; 
  --overflow: hidden;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

<ion-content> — это настраиваемый элемент с теневым DOM. Есть что-то, называемое :: часть псевдоэлемента, для нацеливания на элемент в теневом элементе DOM. Если вы посмотрите на теневой дом, вы увидите это:

Обратите внимание на part = "scroll". Ionic добавил части к своим элементам, которые мы можем использовать через псевдоэлемент ::part, чтобы настроить это и применить наш собственный CSS, чтобы скрыть полосу прокрутки:

ion-content::part(scroll)::-webkit-scrollbar {
   display: none;
}

Проверено это на iOS и Android успешно. Однако я не заставляю его работать в Chrome.

Я считаю, что вы можете использовать slot = "fixed" чтобы сделать элемент фиксированным, удалив полосу прокрутки по умолчанию для вас.

См. ионная документация

Я не смог найти надежного способа сделать это, используя ранее упомянутые методы, они либо не работали, либо полностью останавливали прокрутку. Мой подход заключался в том, чтобы сделать окно ионного содержания шире экрана.

.noscroller {
  left: -10px;
  width: calc(100% + 20px);
}

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

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

если вы хотите удалить прокрутку динамически. Вы можете использовать метод удаления класса scroll-y из shadowDOM в <main class = "inner-scroll scroll-y"></main> внутри <ion-content></ion-content>.

Во-первых, import { Renderer2 } from '@angular/core' в вашем constructor(renderer: Renderer2)

Чтобы достичь этого, в вашем your-component.component.ts в цикле событий ngAfterViewInit или далее.

Это удалит прокрутку со страницы, активированной в вашем приложении.

 for(let el of  Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
  {
    this.renderer.removeClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
    
  }

Это добавит прокрутку со страницы, активированной в вашем приложении.

for(let el of  Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
  {
    this.renderer.addClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
    
  }

Попробуйте это, кажется, пока все работает нормально, сохраняя при этом все функции в Ionic 5.

// variables.scss

ion-content {
  width: calc(100% + 15px);
}
ion-content::part(scroll) {
  padding-right: 15px;
}

Код от spicemix сработал! Я вставил код в global.scss, а не в variable.scss

/* global.scss */
ion-content {
  width: calc(100% + 15px);
}
ion-content::part(scroll) {
  padding-right: 15px;
}