Scrollable view with sticky buttons

If you have one or 2 primary actions that you always want visible, use this template.

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>
</div>

🏓 Interactive playground

css

.scrollable-example .buttons {
	position: sticky;
	bottom: 0;
	padding-block: var(--space-medium);
	background: #fff;
}

🏓 Interactive playground