<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Foundation CSS Off-canvas Scrollbox</
title
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"
/>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
body
{
margin-left: 10px;
margin-right: 10px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
strong
>Foundation CSS Off-canvas Scrollbox</
strong
>
<
div
class
=
"off-canvas-wrapper"
>
<
div
class
=
"off-canvas-content"
data-off-canvas-content
style
=
"min-height:300px;"
>
<
div
class
=
"grid-x"
>
<
div
class
=
"cell"
>
<
button
type
=
"button"
class
=
"button"
data-toggle
=
"offCanvasScrollbox"
>
Open GFG Off-canvas
</
button
> <
br
/><
br
/>
</
div
>
</
div
>
<
div
class
=
"off-canvas-absolute position-left"
id
=
"offCanvasScrollbox"
data-off-canvas
data-content-scroll
=
"false"
>
<
div
style
=
"padding:0 1rem;"
>
<
article
data-off-canvas-scrollbox
style="max-height:290px;overflow:auto;
padding:0.5rem 0;
margin-bottom:1rem;
box-shadow:inset 0 -10px 10px -10px rgba(158, 13, 13, 0.65);">
<
p
>List 1</
p
>
<
ul
>
<
li
>GFG 01</
li
>
<
li
>GFG 02</
li
>
<
li
>GFG 03</
li
>
<
li
>GFG 04</
li
>
<
li
>GFG 05</
li
>
<
li
>GFG 06</
li
>
<
li
>GFG 07</
li
>
<
li
>GFG 08</
li
>
<
li
>GFG 09</
li
>
<
li
>GFG 10</
li
>
</
ul
>
</
article
>
<
article
style="max-height:290px;
overflow:auto; padding:0.5rem 0;
margin-bottom:1rem;
box-shadow:inset 0 -10px 10px -10px rgba(23, 148, 60, 0.65);">
<
p
>List 2</
p
>
<
ul
>
<
li
>GFG 01</
li
>
<
li
>GFG 02</
li
>
<
li
>GFG 03</
li
>
<
li
>GFG 04</
li
>
<
li
>GFG 05</
li
>
<
li
>GFG 06</
li
>
<
li
>GFG 07</
li
>
<
li
>GFG 08</
li
>
<
li
>GFG 09</
li
>
<
li
>GFG 10</
li
>
</
ul
>
</
article
>
<
article
style
=
"padding:0.5rem 0;"
>
<
p
>List 3</
p
>
<
ul
>
<
li
>GFG 01</
li
>
<
li
>GFG 02</
li
>
<
li
>GFG 03</
li
>
<
li
>GFG 04</
li
>
<
li
>GFG 05</
li
>
<
li
>GFG 06</
li
>
<
li
>GFG 07</
li
>
<
li
>GFG 08</
li
>
<
li
>GFG 09</
li
>
<
li
>GFG 10</
li
>
</
ul
>
</
article
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
$(document).foundation();
</
script
>
</
body
>
</
html
>