{"id":83660,"date":"2022-08-13T02:34:11","date_gmt":"2022-08-13T00:34:11","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/ajuste-de-desplazamiento-despues-de-cambios-de-diseno\/"},"modified":"2020-09-17T01:26:50","modified_gmt":"2020-09-17T04:26:50","slug":"ajuste-de-desplazamiento-despues-de-cambios-de-diseno","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/ajuste-de-desplazamiento-despues-de-cambios-de-diseno\/","title":{"rendered":"Scroll adjustment after layout changes"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/ajuste-de-desplazamiento-despues-de-cambios-de-diseno\/#Interoperabilidad\" >Interoperability<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/ajuste-de-desplazamiento-despues-de-cambios-de-diseno\/#Antecedentes\" >Background<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/ajuste-de-desplazamiento-despues-de-cambios-de-diseno\/#Ajuste-de-desplazamiento-CSS\" >CSS scroll adjustment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/ajuste-de-desplazamiento-despues-de-cambios-de-diseno\/#Defectos\" >Defects<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/ajuste-de-desplazamiento-despues-de-cambios-de-diseno\/#Soporte-nativo-para-volver-a-ajustar-despues-de-cambios-de-diseno-en-Chrome-81\" >Native support for re-tweaking after layout changes in Chrome 81<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/ajuste-de-desplazamiento-despues-de-cambios-de-diseno\/#Trabajo-futuro\" >Future work<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/ajuste-de-desplazamiento-despues-de-cambios-de-diseno\/#Realimentacion\" >Feedback<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Starting with Chrome 81, it is no longer necessary to add event listeners to force reset.<\/p>\n<p>\n          <time>February 22, 2020<\/time><\/p>\n<\/header>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/css-scroll-snap\">CSS scroll adjustment<\/a><br \/>\nallows web developers to create well-controlled scrolling experiences by declaring scroll snap positions. A shortcoming of the current implementation is that the scroll setting does not work well when the layout changes, such as when the viewport is resized or the device is rotated. This deficiency is fixed in Chrome 81.<\/p>\n<h2 id=\"interoperability\"><span class=\"ez-toc-section\" id=\"Interoperabilidad\"><\/span>Interoperability <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Many browsers have basic support for CSS Scroll Snap. Watch <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=css-snappoints\">Can I use CSS Scroll Snap?<\/a> for more information.<\/p>\n<p>Chrome is currently the only browser that implements scrolling adjustment after layout changes. Firefox has a<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1530253\">ticket<\/a> open to implement this and Safari also has a<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=144826\">ticket<\/a> to readjust after the content of a scroller changes. For now, you can simulate this behavior by adding the following code to your event listeners to force a tuning to run:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\">scroller<span class=\"token punctuation\">.<\/span><span class=\"token function\">scrollBy<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>However, this will not guarantee that the scroller will return to the same item.<\/p>\n<h2 id=\"background\"><span class=\"ez-toc-section\" id=\"Antecedentes\"><\/span>Background <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"css-scroll-snap\"><span class=\"ez-toc-section\" id=\"Ajuste-de-desplazamiento-CSS\"><\/span>CSS scroll adjustment <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The CSS Scroll Snap feature enables web developers to create well-controlled scrolling experiences by declaring scroll snap positions. These positions ensure that scrollable content is properly aligned with its container to overcome inaccurate scrolling issues. In other words, scroll adjustment:<\/p>\n<ul>\n<li>Avoid awkward scroll positions when scrolling.<\/li>\n<li>Creates the effect of paging the content.<\/li>\n<\/ul>\n<p>Paginated articles and image carousels are two common use cases for scrolling snapshots.<\/p>\n<figure class=\"w-figure\">\n  <img alt='css-scroll-snap-example-4567820' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/css-scroll-snap-example-4567820.png'><figcaption class=\"w-figcaption\">CSS scroll adjustment example. At the end of the scroll, the horizontal center of an image is aligned with the horizontal center of the scroll container.<br \/>\n  <\/figcaption><\/figure>\n<h3 id=\"shortcomings\"><span class=\"ez-toc-section\" id=\"Defectos\"><\/span>Defects <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/snap-after-layout\/resizing-breaks-snap-positions.webm\" type=\"video\/webm;\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/snap-after-layout\/resizing-breaks-snap-positions.mp4\" type=\"video\/mp4;\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n<p>    Snap positions are lost when resizing a window.<br \/>\n  <\/figcaption><\/figure>\n<p>Scrolling adjustment allows users to effortlessly navigate through content, but their inability to adapt to changes in content and layout blocks some of its potential benefits. As shown in the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/argyleink\/pen\/MWWpOmz\">example<\/a><br \/>\nAbove, users have to readjust scroll positions every time they resize a window to find the previously adjusted item. Some common scenarios that cause design changes are:<\/p>\n<ul>\n<li>Resize a window<\/li>\n<li>Rotate a device<\/li>\n<li>Open DevTools<\/li>\n<\/ul>\n<p>The first two scenarios make CSS Scroll Snap less attractive to users and the third is a debugging nightmare for developers. Developers should also consider these shortcomings when trying to create a dynamic experience that supports actions such as adding, removing, or moving content.<\/p>\n<p>A common workaround for this is to add listeners that run a programmatic scrolling through Javascript to force the wrap to run whenever any of these aforementioned layout changes occur. This solution can be ineffective when the user expects the scroller to return to the same content as before. Any additional handling with Javascript seems to almost defeat the purpose of this CSS function.<\/p>\n<h2 id=\"native-support-for-re-snapping-after-layout-changes-in-chrome-81\"><span class=\"ez-toc-section\" id=\"Soporte-nativo-para-volver-a-ajustar-despues-de-cambios-de-diseno-en-Chrome-81\"><\/span>Native support for re-tweaking after layout changes in Chrome 81 <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The aforementioned shortcomings no longer exist in Chrome 81 - the sliders will remain tight even after changing the layout. They will re-evaluate the offset positions after changing their layout and will re-snap to the closest snap position if necessary. If the displacer was previously snapped to an element that still exists after the design change, then the displacer will try to return to it. Pay attention to what happens when the design changes in the following<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/argyleink\/full\/YzXyOaX\">example<\/a>.<\/p>\n<div class=\"w-columns\">\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--worse\">\n<p>    Adjustment position lost\n  <\/p>\n<figure class=\"w-figure\">\n    <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/snap-after-layout\/snap-positions-lost.webm\" type=\"video\/webm;\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/snap-after-layout\/snap-positions-lost.mp4\" type=\"video\/mp4;\"><\/source><\/source><\/video><br \/>\n  <\/figure><figcaption class=\"w-compare__caption\">\n<p>  Rotate a device <strong>do not<\/strong> retain snap positions in Chrome 80. After scrolling to the slide it says <code>NOPE<\/code> and by changing the orientation of the device from portrait to landscape, a blank screen is displayed, indicating that the scroll adjustment position was lost. <\/p>\n<\/figcaption><\/figure>\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--better\">\n<p>    Adjusting position retained\n  <\/p>\n<figure class=\"w-figure\">\n    <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/snap-after-layout\/snap-positions-preserved.webm\" type=\"video\/webm;\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/snap-after-layout\/snap-positions-preserved.mp4\" type=\"video\/mp4;\"><\/source><\/source><\/video><br \/>\n  <\/figure><figcaption class=\"w-compare__caption\">\n<p>  Rotate a device <strong>make<\/strong> retain snap positions in Chrome 81. The slide that says <code>NOPE<\/code> remains in view even if the orientation of the device changes several times. <\/p>\n<\/figcaption><\/figure>\n<\/div>\n<p>Watch the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/drafts.csswg.org\/css-scroll-snap-1\/#re-snap\">Readjust after design changes specification<\/a> for more details.<\/p>\n<div class=\"w-aside w-aside--caution\">\n<p><strong>Caution:<\/strong>  The setting is also executed when the page is loaded. This affects the initial offset offset of the sliders that use the offset adjustment function.<\/p>\n<\/div>\n<p>With &quot;Adjust after layout changes&quot;, developers can implement sticky scroll bars with just a few lines of CSS:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.container<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">scroll-snap-type<\/span><span class=\"token punctuation\">:<\/span> y proximity<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><p><span class=\"token selector\">.container::after<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">scroll-snap-align<\/span><span class=\"token punctuation\">:<\/span> end<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> block<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Want to learn more? See the following <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/argyleink\/pen\/RwPWqKe\">demo chat user interface<\/a> for visual effects.<\/p>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/snap-after-layout\/scroll-snap-bottom.webm\" type=\"video\/webm;\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/snap-after-layout\/scroll-snap-bottom.mp4\" type=\"video\/mp4;\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n<p>    Adding a new message triggers a new setting, causing it to stick to the bottom in Chrome 81.<br \/>\n  <\/figcaption><\/figure>\n<h2 id=\"future-work\"><span class=\"ez-toc-section\" id=\"Trabajo-futuro\"><\/span>Future work <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>All reset scrolling effects are currently instantaneous; a possible follow-up is to support re-adjustment with <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2016\/02\/smooth-scrolling-in-chrome-49\">smooth scrolling effects<\/a>. Watch the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/4609\">specification problem<\/a><br \/>\nfor details.<\/p>\n<h2 id=\"feedback\"><span class=\"ez-toc-section\" id=\"Realimentacion\"><\/span>Feedback <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Your feedback is invaluable in improving the fit after design changes, so go ahead and give it a try and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=866127\">inform Chromium engineers<\/a> what you think.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Starting with Chrome 81, it is no longer necessary to add event listeners to force reset. Feb 22, 2020 CSS Scroll Setting Lets Developers\u2026<\/p>","protected":false},"author":1,"featured_media":82208,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83660","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Ajuste de desplazamiento despu\u00e9s de cambios de dise\u00f1o - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"A partir de Chrome 81, ya no es necesario agregar detectores de eventos para forzar el reajuste. 22 de febrero de 2020 Ajuste de desplazamiento CSS\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/offset-anpassung-nach-layout-anderungen\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ajuste de desplazamiento despu\u00e9s de cambios de dise\u00f1o\" \/>\n<meta property=\"og:description\" content=\"A partir de Chrome 81, ya no es necesario agregar detectores de eventos para forzar el reajuste. 22 de febrero de 2020 Ajuste de desplazamiento CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/offset-anpassung-nach-layout-anderungen\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-13T00:34:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/offset-anpassung-nach-layout-anderungen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/offset-anpassung-nach-layout-anderungen\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Ajuste de desplazamiento despu\u00e9s de cambios de dise\u00f1o\",\"datePublished\":\"2022-08-13T00:34:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/offset-anpassung-nach-layout-anderungen\\\/\"},\"wordCount\":932,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/offset-anpassung-nach-layout-anderungen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/offset-anpassung-nach-layout-anderungen\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/offset-anpassung-nach-layout-anderungen\\\/\",\"name\":\"Ajuste de desplazamiento despu\u00e9s de cambios de dise\u00f1o - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/offset-anpassung-nach-layout-anderungen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/offset-anpassung-nach-layout-anderungen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"datePublished\":\"2022-08-13T00:34:11+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"A partir de Chrome 81, ya no es necesario agregar detectores de eventos para forzar el reajuste. 22 de febrero de 2020 Ajuste de desplazamiento CSS\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/offset-anpassung-nach-layout-anderungen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/offset-anpassung-nach-layout-anderungen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"width\":1200,\"height\":1200,\"caption\":\"social-6815535-9949209-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Scroll Adjustment After Design Changes - R Marketing Digital","description":"Starting with Chrome 81, it is no longer necessary to add event listeners to force reset. Feb 22, 2020 CSS Scroll Adjustment","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/offset-anpassung-nach-layout-anderungen\/","og_locale":"en_US","og_type":"article","og_title":"Ajuste de desplazamiento despu\u00e9s de cambios de dise\u00f1o","og_description":"A partir de Chrome 81, ya no es necesario agregar detectores de eventos para forzar el reajuste. 22 de febrero de 2020 Ajuste de desplazamiento CSS","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/offset-anpassung-nach-layout-anderungen\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-13T00:34:11+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/offset-anpassung-nach-layout-anderungen\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/offset-anpassung-nach-layout-anderungen\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Ajuste de desplazamiento despu\u00e9s de cambios de dise\u00f1o","datePublished":"2022-08-13T00:34:11+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/offset-anpassung-nach-layout-anderungen\/"},"wordCount":932,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/offset-anpassung-nach-layout-anderungen\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/offset-anpassung-nach-layout-anderungen\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/offset-anpassung-nach-layout-anderungen\/","name":"Scroll Adjustment After Design Changes - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/offset-anpassung-nach-layout-anderungen\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/offset-anpassung-nach-layout-anderungen\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","datePublished":"2022-08-13T00:34:11+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Starting with Chrome 81, it is no longer necessary to add event listeners to force reset. Feb 22, 2020 CSS Scroll Adjustment","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/offset-anpassung-nach-layout-anderungen\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/offset-anpassung-nach-layout-anderungen\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","width":1200,"height":1200,"caption":"social-6815535-9949209-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/83660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=83660"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/83660\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/82208"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=83660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=83660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=83660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}