Scrollable view with sticky buttons
If you have one or 2 primary actions that you always want visible, use this template.
Your long content here
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
html
<div class="scrollable-example">
<h1 class="h1">Your long content here</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
<div class="buttons">
<button type="button" class="button button-primary">
Primary action
</button>
</div>
css
.scrollable-example .buttons {
position: sticky;
bottom: 0;
padding-block: var(--space-medium);
background: #fff;
}