web-dev-qa-db-ja.com

Ionic 4：イオンコンテンツでスクロールバーを隠す方法

イオンコンテンツでスクロールバーを非表示にしようとしています（Ionic 4）ionic 4にはイオンスクロールがありません。そのため、イオンコンテンツを使用しましたが、css属性が見つかりません非表示にする（ほとんどが機能しない）

スクロールしたいが、スクロールバーを表示したくない

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

私は試しましたが、イオン含有量では機能しません。

htmlcssangularionic-frameworkionic4
8
Roishuk

IonicはシャドウDOMを使用するため、Ionic4では以下を使用する必要があります。

global.scss

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

そしてページに

<ion-content class="no-scroll">
4
Rostislav
::-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;
    }
3
chetan chumble

ありがとう@rostislav

あなたの解決策はWebStormによって提案されていなくても、警告の意味で黄色の下線を引いていますが、私のために働いて、それは素晴らしいです:)

解決策：これらの行を両方に追加しますglobal.scssおよびvariables.scss：


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

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

.scroll-content {
  overflow: hidden;
}

NOTIC：次に、ブラウザのキャッシュをクリアしてページを更新します。

すべてのページでスクロールが無効になっていることを忘れないでください。このコードを.sccsスクロールする必要がないページのファイル！

1
ali houshyaripour

IonicイオンコンテンツのシャドウDOMを使用するため、シャドウDOMの要素のスクロールを無効にし、その後、イオンコンテンツを自分のスクロールにして、イオンコンテンツのスクロールバーを非表示にする必要があります。結果は非表示の作業スクロールバーを含むイオンコンテンツ CSSカスタムプロパティ を使用する必要があります。スタイルをグローバルスコープに追加します。

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

ここはハックですか？ 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>
0
Mark