{"id":304986,"date":"2020-03-15T07:03:20","date_gmt":"2020-03-15T14:03:20","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=chapters&#038;p=304986"},"modified":"2021-10-06T07:51:15","modified_gmt":"2021-10-06T14:51:15","slug":"scroll-indicator","status":"publish","type":"chapters","link":"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/scroll-indicator\/","title":{"rendered":"Scroll Indicator"},"content":{"rendered":"\n<p>There is a built-in browser feature for indicating your scroll position. Get this: it&#8217;s the scrollbar, and it does a great job. There is even a standardized way to style scrollbars these days. <\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  --scrollbarBG: #CFD8DC;\n  --thumbBG: #90A4AE;\n\n  scrollbar-width: thin;\n  scrollbar-color: var(--thumbBG) var(--scrollbarBG);\n}<\/code><\/pre>\n\n\n\n<p>You might want to <a href=\"https:\/\/css-tricks.com\/the-current-state-of-styling-scrollbars\/\">combine those with <code>-webkit-<\/code> styles<\/a> for the best browser support. For example:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWWXQzE\" src=\"\/\/codepen.io\/anon\/embed\/QWWXQzE?height=350&amp;theme-id=1&amp;slug-hash=QWWXQzE&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWWXQzE\" title=\"CodePen Embed QWWXQzE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group print-only-content\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html {\n  --scrollbarBG: #CFD8DC;\n  --thumbBG: #90A4AE;\n}\nbody::-webkit-scrollbar {\n  width: 11px;\n}\nbody {\n  scrollbar-width: thin;\n  scrollbar-color: var(--thumbBG) var(--scrollbarBG);\n}\nbody::-webkit-scrollbar-track {\n  background: var(--scrollbarBG);\n}\nbody::-webkit-scrollbar-thumb {\n  background-color: var(--thumbBG) ;\n  border-radius: 6px;\n  border: 3px solid var(--scrollbarBG);\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/styled-scrollbar.png?resize=479%2C439&#038;ssl=1\" alt=\"\" class=\"wp-image-350823\" width=\"479\" height=\"439\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/styled-scrollbar.png?w=1022&amp;ssl=1 1022w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/styled-scrollbar.png?resize=300%2C275&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/styled-scrollbar.png?resize=768%2C705&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/styled-scrollbar.png?resize=1000%2C918&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure><\/div>\n<\/div><\/div>\n\n\n\n<p>But let&#8217;s say you weren&#8217;t as interested in styling the scrollbar as you were building your own indicator to show the user <em>how far down<\/em> they&#8217;ve scrolled. Like a progress bar that fills up as you approach the end of reading an article. <\/p>\n\n\n\n<p>Mike Riethmuller found a way to do it that is extraordinarily clever! <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWwGaVG\" src=\"\/\/codepen.io\/anon\/embed\/MWwGaVG?height=450&amp;theme-id=1&amp;slug-hash=MWwGaVG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWwGaVG\" title=\"CodePen Embed MWwGaVG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It&#8217;s not only clever but is done with remarkably little code. To understand, let&#8217;s remove the white backgrounds on the header and the pseudo-element on the body revealing the <code>linear-gradient<\/code> used.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-on-body.png?fit=881%2C1024&amp;ssl=1\" alt=\"\" class=\"wp-image-305180\" width=\"412\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-on-body.png?w=1334&amp;ssl=1 1334w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-on-body.png?resize=258%2C300&amp;ssl=1 258w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-on-body.png?resize=881%2C1024&amp;ssl=1 881w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-on-body.png?resize=768%2C892&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-on-body.png?resize=1322%2C1536&amp;ssl=1 1322w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-on-body.png?resize=1000%2C1162&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" \/><\/figure><\/div>\n\n\n\n<p>Ah ha! A diagonal gradient drawn with a hard stop. We can already see what&#8217;s happening here. As the page is scrolled down, the bit of this gradient that you can see becomes more and more filled with blue. The trick then becomes hiding everything but a small strip of this gradient, hence the solid backgrounds on the header and the pseudo-element, placed a few pixels apart.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-gap.png?resize=412%2C424&#038;ssl=1\" alt=\"\" class=\"wp-image-305181\" width=\"412\" height=\"424\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-gap.png?w=992&amp;ssl=1 992w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-gap.png?resize=291%2C300&amp;ssl=1 291w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/gradient-gap.png?resize=768%2C791&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure><\/div>\n\n\n\n<p>Perhaps the most clever bit is how the gradient background is <em>sized<\/em>. You might think it just covers the entire background, but no. If you did that, the scrollbar would never complete because it is at the top of the page and the gradient completes at the bottom of the page. Because of this demos mid-page placement, the gradient needs to complete almost a full viewport-height short of the bottom. That would looke like:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">background-size: 100% calc(100% - 100vh);<\/code><\/pre>\n\n\n\n<p>Except the fixed header size factors in a well, so that needs to be subtracted. In the end, the code appears as if it has quite a few magic numbers in it. But they aren&#8217;t quite magical as most of them are related to each other genetically. <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/MWwGaVG\" rel=\"noopener\">Here&#8217;s a fork<\/a> that turns them all into custom properties so you can see that.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwPyoaB\" src=\"\/\/codepen.io\/anon\/embed\/RwPyoaB?height=450&amp;theme-id=1&amp;slug-hash=RwPyoaB&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwPyoaB\" title=\"CodePen Embed RwPyoaB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group print-only-content\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">html {\n  --header-size: 125px;\n  --scrollbar-height: 3px;\n  --scrollbar-bg: #ddd;\n  --scrollbar-progress-color: #0089f2;\n}\nheader {\n  position: fixed;\n  top: 0;\n  height: var(--header-size);\n  width: 100%;\n  background: white;\n  padding: 1rem 2rem;\n}\nmain {\n  margin-top: calc(var(--header-size) + var(--scrollbar-height));\n  padding: 2rem;\n}\nbody {\n  background: linear-gradient(\n    to right top,\n    var(--scrollbar-progress-color) 50%,\n    var(--scrollbar-bg) 50%\n  );\n  background-size: 100%\n    calc(100% - 100vh + var(--header-size) + var(--scrollbar-height) + 1px);\n  background-repeat: no-repeat;\n  margin: 0;\n  font-family: \"Open Sans\", sans-serif;\n}\nbody::before {\n  content: \"\";\n  position: fixed;\n  top: calc(var(--header-size) + var(--scrollbar-height));\n  bottom: 0; width: 100%;\n  z-index: -1;\n  background: white;\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<p>Why do this?<\/p>\n\n\n\n<ul><li>It&#8217;s kinda fun.<\/li><li>Some browsers don&#8217;t have scrollbars at all (think mobile, and &#8220;Scroll scrollbars only when scrolling&#8221; setting on macOS).<\/li><\/ul>\n\n\n\n<p>If you want to do something really fancy, like display the percentage of how far you&#8217;ve scrolled through the page, or even fancier like showing an estimated reading time that is programmatically calculated, well, that&#8217;s all doable, but <a href=\"https:\/\/css-tricks.com\/reading-position-indicator\/\">you&#8217;re in JavaScript territory<\/a>. <\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There is a way you can build a progress bar displaying how far a user has scrolled down the page (like a &#8220;reading progress indicator&#8221;) without any JavaScript at all. Just some clever usage of gradients and positioning.<\/p>\n","protected":false},"featured_media":0,"parent":254473,"menu_order":6,"template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/chapters\/304986"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/chapters"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/chapters"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/chapters\/254473"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=304986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}