{"id":1465,"date":"2008-11-19T07:48:17","date_gmt":"2008-11-19T14:48:17","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=1465"},"modified":"2015-02-25T19:16:31","modified_gmt":"2015-02-26T02:16:31","slug":"4-forcing-scrollbars-eliminating-horizonatal-jumps","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/4-forcing-scrollbars-eliminating-horizonatal-jumps\/","title":{"rendered":"#4: Forcing Scrollbars: Eliminating &#8220;Horizontal Jumps&#8221;"},"content":{"rendered":"<p>In this screencast I talk about how to force vertical scrollbars onto websites. Without doing this, pages with centered content can appear to &#8220;jump&#8221; to the left or right when going from a page that needs to vertically scroll to one that does not (and visa versa). I cover two different major techniques for doing this, since they both have their advantages and disadvantages between different browsers.<\/p>\n<p><strong>Links from video:<\/strong>\t\t\t<\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar\/\">Original Article<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this screencast I talk about how to force vertical scrollbars onto websites. Without doing this, pages with centered content can appear to &#8220;jump&#8221; to the left or right when going from a page that needs to vertically scroll to one that does not (and visa versa). I cover two different major techniques for doing [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","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,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":194420,"url":"https:\/\/css-tricks.com\/snippets\/sass\/custom-scrollbars-mixin\/","url_meta":{"origin":1465,"position":0},"title":"Custom Scrollbars Mixin","date":"January 28, 2015","format":false,"excerpt":"Scrollbars are one of those UI components that are present on almost every page of the internet, yet we (developers) have little to no control over it. Some browsers give us the ability to customize their appearance but for most browsers including Firefox it just is not possible. There has\u2026","rel":"","context":"In \"scrollbars\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":359742,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-clip-margin\/","url_meta":{"origin":1465,"position":1},"title":"overflow-clip-margin","date":"January 3, 2022","format":false,"excerpt":"The CSS overflow-clip-margin property determines how far the overflow of an element can go beyond the element's box before being clipped. This area is called the overflow clip edge. .element { height: 100px; overflow: clip; \/* required *\/ overflow-clip-margin: 20px; } overflow: clip; clips the element's content while overflow-clip-margin sets\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":285700,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-color\/","url_meta":{"origin":1465,"position":2},"title":"scrollbar-color","date":"April 2, 2019","format":false,"excerpt":"The scrollbar-color property controls the two colors of a scrollbar: the thumb color and the track color. scrollbar-color is part of the CSS Working Group's Scrollbars Module Level 1 draft, which is still a work in progress as of this writing. Prior to scrollbar-color, developers had no standard way to\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14101,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar\/","url_meta":{"origin":1465,"position":3},"title":"scrollbar","date":"September 6, 2011","format":false,"excerpt":"A brief history of styling scrollbars: It used to be a thing only Internet Explorer could do (ancient versions) with stuff like -ms-scrollbar-base-color. These do not exist anymore.Then WebKit-based browser engines got on board with stuff like ::-webkit-scrollbar. That's what this Alamanac entry mostly covers, as it works across the\u2026","rel":"","context":"In \"scrollbars\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278429,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-gutter\/","url_meta":{"origin":1465,"position":4},"title":"scrollbar-gutter","date":"November 9, 2018","format":false,"excerpt":"The scrollbar-gutter property in CSS provides flexibility to determine how the space the browser uses to display a scrollbar that interacts with the content on the screen. The spec describes it as \"reserving space for the scrollbar\". The beauty of this is that now we can make sure: Content doesn't\u2026","rel":"","context":"In \"scrollbars\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-gutter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376465,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color-scheme\/","url_meta":{"origin":1465,"position":5},"title":"color-scheme","date":"January 27, 2023","format":false,"excerpt":"You know how we have \u201cdark mode\u201d and \u201clight mode\u201d these days? Browsers also have \"dark\" and \"light\" color schemes baked into their default styles. The CSS color-scheme property lets the browser use (or choose) to display certain elements with its dark or light default styling. :root { color-scheme: light\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1465"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1465"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1465\/revisions"}],"predecessor-version":[{"id":152451,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1465\/revisions\/152451"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1465"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}