Scrollable
←Wrap content in a .scroll-h or .scroll-v container to get a “poor mans responsive website”.
In WebKit/Blink browsers an additional .show-scrollbar class will make the scrollbar always visible and styled. Also see the vertical scrollable example.
Syntax:
.scroll-{direction}
SCSS:
_scrollable.scss
😁
😂
🤣
😃
😄
😅
😆
😉
😊
😋
😎
😍
😘
😗
😙
😚
🙂
🤗
🤩
🤔
🤨
😐
😑
😶
🙄
😏
😣
😥
😮
🤐
😯
😪
😫
😴
😌
😛
😜
😝
🤤
😒
😓
😔
😕
🙃
🤑
😲
🙁
😖
😞
😟
😤
😢
😭
😦
😧
😨
😩
🤯
😬
😰
😱
😳
🤪
😵
😡
😠
🤬
😷
🤒
🤕
🤢
🤮
🤧
😇
🤠
🤡
🤥
🤫
🤭
🧐
🤓
<div class="scroll-h bo_xs">
<div class="text_xxxl flex wrap-no">
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😁</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😂</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤣</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😃</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😄</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😅</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😆</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😉</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😊</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😋</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😎</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😍</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😘</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😗</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😙</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😚</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🙂</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤗</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤩</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤔</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤨</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😐</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😑</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😶</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🙄</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😏</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😣</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😥</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😮</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤐</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😯</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😪</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😫</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😴</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😌</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😛</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😜</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😝</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤤</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😒</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😓</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😔</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😕</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🙃</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤑</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😲</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🙁</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😖</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😞</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😟</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😤</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😢</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😭</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😦</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😧</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😨</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😩</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤯</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😬</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😰</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😱</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😳</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤪</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😵</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😡</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😠</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤬</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😷</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤒</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤕</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤢</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤮</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤧</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😇</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤠</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤡</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤥</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤫</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤭</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🧐</div>
<div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤓</div>
</div>
</div>
<style>
.docs-scroll-emoji { min-width: ; line-height: }
</style>