ion-content
The content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view.
Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the CSS Utilities or by individually styling it using CSS and the available CSS Custom Properties.
Basic Usage
<ion-content class="ion-padding">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
Header & Footer
Content can be the only top-level component in a page, or it can be used alongside a header, footer, or both. When used with a header or footer, it will adjust its size to fill the remaining height.
<ion-header>
<ion-toolbar>
<ion-title> Header </ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title> Footer </ion-title>
</ion-toolbar>
</ion-footer>
Fullscreen Content
By default, content fills the space between a header and footer but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the translucent
property is set on either of them, or opacity
is set on the toolbar. This can be achieved by setting the fullscreen
property on the content to true
.
- src/app/example.component.html
- src/app/example.component.css
<ion-header>
<ion-toolbar>
<ion-title> Header </ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" class="ion-padding">
<h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
nulla sit amet erat malesuada euismod vel a nulla.
</p>
<p>
Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
maximus.
</p>
<p>
Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
turpis.
</p>
<p>
Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
condimentum fermentum rutrum.
</p>
<p>
Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
</p>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title> Footer </ion-title>
</ion-toolbar>
</ion-footer>
Fixed Content
To place elements outside of the scrollable area, assign them to the fixed
slot. Doing so will absolutely position the element to the top left of the content. In order to change the position of the element, it can be styled using the top, right, bottom, and left CSS properties.
- src/app/example.component.html
- src/app/example.component.css
<ion-content class="ion-padding">
<h1>Scroll the content and notice that the fixed button does not scroll.</h1>
<ion-button>Normal Button</ion-button>
<ion-button slot="fixed">Fixed Button</ion-button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
nulla sit amet erat malesuada euismod vel a nulla.
</p>
<p>
Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
maximus.
</p>
<p>
Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
turpis.
</p>
<p>
Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
condimentum fermentum rutrum.
</p>
<p>
Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
</p>
</ion-content>
Scroll Methods
Content provides methods that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a duration
in order to smoothly transition instead of instantly changing the position.
- src/app/example.component.html
- src/app/example.component.ts
<ion-content class="ion-padding">
<h1>Click on the buttons to scroll the content.</h1>
<ion-button expand="block" (click)="scrollToBottom()">Scroll to Bottom</ion-button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
nulla sit amet erat malesuada euismod vel a nulla.
</p>
<p>
Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
maximus.
</p>
<p>
Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
turpis.
</p>
<p>
Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
condimentum fermentum rutrum.
</p>
<p>
Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
</p>
<ion-button expand="block" (click)="scrollToTop()">Scroll to Top</ion-button>
</ion-content>
Scroll Events
Scroll events are disabled by default for content due to performance. However, they can be enabled by setting scrollEvents
to true
. This is necessary before listening to any of the scroll events.
- src/app/example.component.html
- src/app/example.component.ts
<!-- Scroll events are disabled by default for content for performance reasons, enable them to listen to them -->
<!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
<ion-content
[scrollEvents]="true"
(ionScrollStart)="handleScrollStart()"
(ionScroll)="handleScroll($any($event))"
(ionScrollEnd)="handleScrollEnd()"
class="ion-padding"
>
<h1>Scroll to fire the scroll events and view them in the console.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
nulla sit amet erat malesuada euismod vel a nulla.
</p>
<p>
Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
maximus.
</p>
<p>
Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
turpis.
</p>
<p>
Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
condimentum fermentum rutrum.
</p>
<p>
Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
</p>
</ion-content>
Theming
Colors
<ion-content color="primary" class="ion-padding">
<h1>Primary content</h1>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="secondary" class="ion-padding">
<h1>Secondary content</h1>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="tertiary" class="ion-padding">
<h1>Tertiary content</h1>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="success" class="ion-padding">
<h1>Success content</h1>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="warning" class="ion-padding">
<h1>Warning content</h1>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="danger" class="ion-padding">
<h1>Danger content</h1>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="light" class="ion-padding">
<h1>Light content</h1>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="medium" class="ion-padding">
<h1>Medium content</h1>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
<ion-content color="dark" class="ion-padding">
<h1>Dark content</h1>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
CSS Shadow Parts
- src/app/example.component.html
- src/app/example.component.css
<ion-content class="ion-padding">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
CSS Custom Properties
- src/app/example.component.html
- src/app/example.component.css
<ion-content class="ion-padding">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Here's a small text description for the content. Nothing more, nothing less.</p>
</ion-content>
Interfaces
ScrollBaseDetail
interface ScrollBaseDetail {
isScrolling: boolean;
}
ScrollDetail
interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
scrollTop: number;
scrollLeft: number;
}
ScrollBaseCustomEvent
While not required, this interface can be used in place of the CustomEvent
interface for stronger typing on the ionScrollStart
and ionScrollEnd
events.
interface ScrollBaseCustomEvent extends CustomEvent {
detail: ScrollBaseDetail;
target: HTMLIonContentElement;
}
ScrollCustomEvent
While not required, this interface can be used in place of the CustomEvent
interface for stronger typing on the ionScroll
event.
interface ScrollCustomEvent extends ScrollBaseCustomEvent {
detail: ScrollDetail;
}
Properties
color
Description | The color to use from your application's color palette. Default options are: "primary" , "secondary" , "tertiary" , "success" , "warning" , "danger" , "light" , "medium" , and "dark" . For more information on colors, see theming. |
Attribute | color |
Type | "danger" ๏ฝ "dark" ๏ฝ "light" ๏ฝ "medium" ๏ฝ "primary" ๏ฝ "secondary" ๏ฝ "success" ๏ฝ "tertiary" ๏ฝ "warning" ๏ฝ string & Record<never, never> ๏ฝ undefined |
Default | undefined |
forceOverscroll
Description | If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting. |
Attribute | force-overscroll |
Type | boolean ๏ฝ undefined |
Default | undefined |
fullscreen
Description | If true , the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. |
Attribute | fullscreen |
Type | boolean |
Default | false |
scrollEvents
Description | Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to true . |
Attribute | scroll-events |
Type | boolean |
Default | false |
scrollX
Description | If you want to enable the content scrolling in the X axis, set this property to true . |
Attribute | scroll-x |
Type | boolean |
Default | false |
scrollY
Description | If you want to disable the content scrolling in the Y axis, set this property to false . |
Attribute | scroll-y |
Type | boolean |
Default | true |
Events
Name | Description |
---|---|
ionScroll | Emitted while scrolling. This event is disabled by default. Set scrollEvents to true to enable. |
ionScrollEnd | Emitted when the scroll has ended. This event is disabled by default. Set scrollEvents to true to enable. |
ionScrollStart | Emitted when the scroll has started. This event is disabled by default. Set scrollEvents to true to enable. |
Methods
getScrollElement
Description | Get the element where the actual scrolling takes place. This element can be used to subscribe to scroll events or manually modify scrollTop . However, it's recommended to use the API provided by ion-content :i.e. Using ionScroll , ionScrollStart , ionScrollEnd for scrolling events and scrollToPoint() to scroll the content into a certain point. |
Signature | getScrollElement() => Promise<HTMLElement> |
scrollByPoint
Description | Scroll by a specified X/Y distance in the component. |
Signature | scrollByPoint(x: number, y: number, duration: number) => Promise<void> |
scrollToBottom
Description | Scroll to the bottom of the component. |
Signature | scrollToBottom(duration?: number) => Promise<void> |
scrollToPoint
Description | Scroll to a specified X/Y location in the component. |
Signature | scrollToPoint(x: number ๏ฝ undefined ๏ฝ null, y: number ๏ฝ undefined ๏ฝ null, duration?: number) => Promise<void> |
scrollToTop
Description | Scroll to the top of the component. |
Signature | scrollToTop(duration?: number) => Promise<void> |
CSS Shadow Parts
Name | Description |
---|---|
background | The background of the content. |
scroll | The scrollable container of the content. |
CSS Custom Properties
Name | Description |
---|---|
--background | Background of the content |
--color | Color of the content |
--keyboard-offset | Keyboard offset of the content |
--offset-bottom | Offset bottom of the content |
--offset-top | Offset top of the content |
--padding-bottom | Bottom padding of the content |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content |
--padding-top | Top padding of the content |
Slots
Name | Description |
---|---|
`` | Content is placed in the scrollable area if provided without a slot. |
fixed | Should be used for fixed content that should not scroll. |