{"_id":"@bbc/psammead-content-anchor","_rev":"67-026e1b30f2c018eec343238ecf61d6a6","name":"@bbc/psammead-content-anchor","dist-tags":{"latest":"1.0.0-alpha.1","alpha":"2.0.0-alpha.31"},"versions":{"1.0.0-alpha.1":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.1","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.1","maintainers":[{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"e6cb8bbc85fa779d90aa46b82b96f9de0b7a909f","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.1.tgz","fileCount":8,"integrity":"sha512-i3Py7YXITaRFjUgJtW7IHpwzNjyyb+7Sb96DViSt3JXThgphoP/NM94ylCLipJIspoL6tElcytv++v1rfa7+hA==","signatures":[{"sig":"MEUCIH0JiwDLZWc8ypXKO1gXso0ptutDuFk2oiHN+AvJLZYvAiEApFluLvjd4mFSACq+bDV0v5F4USvVxcve04JPmfFndhc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMrNaCRA9TVsSAnZWagAAMk0P+wauLKusfBXVzbmZOSDz\npO5xvqY1a6vJXhvYmJb5zuhiWL52sbQKh7y/nuZhjY1iHGW5p4n+PvFnR/J4\ntSWdwunjWKNaEWYRzZV5T251VwAPhfy8dJTB+9dBN78oRuRE8ltrCUef7WR6\nBkrETyCQeI0yaI6M9dRuysjEtKJICjkTpn0uJOcytA+YthuJKJraM2WgcFh0\n1m2rVYFRftLkKee3h2PK8v6/C0d0zh86U9jKHxHekeXiesjmc2bmqODVRmsL\nLvrWV1FMzSaA1oT15CvBq1Cc2OHzmnJyEAgLVsQsV/YushInSGFyR/GzTH0n\nCr249NHmEukCoi1icbIkzDuBBG4CxtARqXMgaanDxuQU9r7L8PqWiXRDBlMl\n1YSq0RSXXnYUTYNjnSkmszIcS0/0Puz9yfQv4zQzZU9w4PNc0WU0SW8+D9Mp\nASMCRwXKOwaqmAyf+q6N17K2pf7tu+3Pq2vprjcNVIBqI9g5J6CHc5BQ94Yb\nJ+ly8PSa60JiRJoSMtn49JtUZY8Z3txvxmJG8rqlzHaPljDGqIgMPgo18jJh\nc0DLYyGj4fF27t//IEfxBgVKIMi1LqMO5oK+h5YG4loC7y1938l+qMjhb0xl\nYn84AIg3w9eUNPlVhOy6pRTCgm5cLrO3dhX+grZw9gZYcMio7GawJ7IAVx2K\noVu/\r\n=9Z81\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.13.4","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.13.0","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"devDependencies":{"@bbc/psammead-headings":"^3.1.18"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.1_1580381017928_0.7842784434179944","host":"s3://npm-registry-packages"}},"1.0.0-alpha.2":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.2","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.2","maintainers":[{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"9ede1be4c771d7274605b7d9a605870bd5930628","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.2.tgz","fileCount":8,"integrity":"sha512-dDxuJ88LOILFhal8HkDG8sd7IYaASfL4lH6G6LbQ/GdByvBfMRzh9mJqcAERlBTYSaIz9Pjz3zjqVL9EkHn6Pw==","signatures":[{"sig":"MEQCIFClHdFUy3Sj9SknA7qieuKGHTsbndCR29Dwl0vCmZsAAiA8qUDdZwowUno7NlcxC6rX7nok3bJH4/CKn+w0nyGG9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePYqRCRA9TVsSAnZWagAA0hQQAKHVM+bZGmONgkKCDfrf\n1hp8pR2WpVk+j70NkvbEjWf9DygGHqJh71GhWTFBoMlzdV5ITDOp986+KtJt\noXcfC0DHit9gkTycaRPtHmlmnHq0TG7///q92mfehHuF9L6DhmWN9RI872zy\nyOJ+OgEdsRffQP5JC9BfP+zLFQhg6MEVTcj2vBx5Bfa/CTgOHKOj+oGT3P02\n98ZvrxehIJZLU41MVfbApsyrZYKbB7tg2SaopDIsrkwS+wPfWoenetwLBHez\nngtqkI5xN3CkEUwR282FExtl7AqUzFzI1sM/hfok8bypt3Nxd5XVY4PP2fve\nU4UIxd9o8+PQ11urRmrWiiVOMdLwDNpWWSN9hOFmO0bZkvLSfgZms7qgvXfz\nugf6cxS0jHFYC2lPd258KKPznsscJ6/tUdI1trbhw6pjrl8Kz+++kd7Ei4Sd\nWuK5TpGfzGzXq8037353f0Oyv57SGfgJwEZuVAgquuL1zfUfet4lKemqUcSx\nw5Py3AB1V/Qxdo2LuU7ZOZHCsWQj87rDd3DlG30eSjmyrmVwZ3BTbbCO+tkc\nXcYbB7KB2362ijLwbFNf2zjburoXV47MsJNUfQqGUYPPBwpOkgdGbxAqT9uP\n38YYPrV2JC4K8Zxc5LGUcOooab4IQqEjYA2ll5cNQPeZx3MlG0ij6JXVog+2\nK5T2\r\n=OjCO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.13.4","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.13.0","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.26"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.2_1581091472594_0.4366189959289011","host":"s3://npm-registry-packages"}},"1.0.0-alpha.3":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.3","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.3","maintainers":[{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"4857bb0ce59723206c6c7a99ee7379fe61631e8d","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.3.tgz","fileCount":8,"integrity":"sha512-AJpYQgSlKVjvKHu4UpmfgHUTQzoismlhmjk/yyIkLNsU3JOaUgpSkodXhlEz5ab3SCvBGgAZGAM5D/RYCtqK9A==","signatures":[{"sig":"MEYCIQDIeGfYvZLgBhuKH1HTguBNHyKsX3Be7IO2f1BAlxhSuAIhAM8qMGBR97h7rhS5N2R+f36//sDn4LU4RUzPkc52od+B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeS8txCRA9TVsSAnZWagAA5JQQAIpANSszbvQ4DotwNYPF\nn/wLa7m0yUEa9vX0l0ReN8igQGy50W6Fyc+aEXqPTk9BFXbuQjACIMqq0MXn\nI/biXdM0ozkXTbTaKmOSttGoNbuk8vQfjg+4yJGedIKbLyQN4p0Gbu3lgo5F\nRhGaSvHdJtJHyj4DWvzL/byVF8TxHMenNSOL6bpQtEeUq5jPXgc7S/cMckXh\nkSjCxqGN6lXPxEojpnawlgYKAolPmotTz0ijhqaoszmIZrUYiGyPDBrNENMo\n9uck9NozCPGT0xZCLMUXevXi2nZidN+dJPumrmrQSJyEiN6afz6XDMbLXcNc\nB3UuAfBHBCDSQyvLibpam+DckA++KiOW0ojgnLM9BsuMfLI0eQcBc9zdAXOz\n1LKaJcZ+qk0yS/AlVYyJgj8kL+fiAWBmd22dnKPeBnPvC8BZPN6LVFcnqAWK\nNfxxn/Pc69AZiI+kXFfJMYjDvT09zvPYDCnsCgu4QVhUoxu7fpw3wG3YuRML\nzMEkkDQrEBp4WGvFensbCsTYnBpiioRbJQlViff90CUg34BUFv7J3yluopJ6\nVY82UMRSQRDPT+wByYebOqSrdRiu6j8LaCwsCFeQCyhZcgGrJ8alnE24r67R\ndTyVxU5xO8Bbha20ebZy1gbyaDdJ3mxawsoVF0vQb+SJgIqQfBO25s2NX6ZQ\n7W2Y\r\n=eHQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.13.7","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.15.0","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.28"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.3_1582025585237_0.1094462960834719","host":"s3://npm-registry-packages"}},"1.0.0-alpha.4":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.4","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.4","maintainers":[{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"d0ed335e78e1a5708baf82a4ce4e264570ad150c","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.4.tgz","fileCount":8,"integrity":"sha512-j2uWhDNsU8XsgFZM1tQUStMT4fPfX+4sFhjYKdh6XlpIBB82J4E1g15e7jyUMt8Zyj8KYoQrGIz43qv8RBJhHg==","signatures":[{"sig":"MEYCIQDh2laPrQZKa+vDFIL7KW8NCnPee0c60/3ABu8gjaLpqAIhAJk+risWGQv7SLO5eqIyDJZgpjI7STQ46lpLRImbOspJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegfVLCRA9TVsSAnZWagAAo5gP/2ldSykhR+uHhFHFLtVN\nrs22dWQa37VoE0E5YMwMYDhGdYHyMsnnHp79QgUlGxUc+cqMF93tclvN1YbI\nrFDisgcrSGiRxh3urswX1lBdtIWcQTHGpUneMiFsJ8dlWVIdf10LPpQzTxFO\nB84nAp15oiC/zW71Hknnc5aDU/7kGYw850gcibjNtXEC6t3Ekmy7lT7/5auG\nYiQPPJgz0HdFfG7WRAkmNBeWjuQ7hpHBQ8G+FhfrRPAaUqAGtsMh/bZr3Osf\niwgIRdS41WX8cXKCBRwnmXn0Yd5lQDscmoQMDOUCu8oN/Ev9urPFtP5zyvax\nEPfKCxEjJ/ALwpiWtwmsk0ymeVv1F7aHYNzGNYKjBddkKcJ/l4EmczLWG65Y\n19bOtebWc/NTlLi+VwuuZCNhmpxJsalvRntUUdCDzQAAE7Auuo7t6lJrC8FA\nInEPju/afetJ8o+1CaVN1eRf1TeAVY7hkfzcvX9a0q0a542ykYhzsTiod0bl\nhCCHxsd1tRrfVgQhBRSe7JGzK2y4R1MoZfqfdaBxaxNVjbffx6DuYGBYfGVT\n99h9W1u4QLyX1uyaXFp35icxTOeDzAKJT62aNbR1c93KxVmKVgsuzh0DSCxi\njOSP2CRewhqxxu3De1oeUFthhs9/H6N04Bhtoc7t5pegAMXT9QsndbqoX5kS\nUGZ+\r\n=wfg+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.13.7","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.15.0","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.28"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.4_1585575237913_0.9957243055397955","host":"s3://npm-registry-packages"}},"1.0.0-alpha.5":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.5","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.5","maintainers":[{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"22a12c1a0560251dfcbea4f54f4eaab85ad22581","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.5.tgz","fileCount":8,"integrity":"sha512-yw9yzLJQhs80d+4vmcYSRzUfbREXYHEnWptORAl7s9aMgYS3LuyBDOaOLNwlaWyRuNLGKYaw4E9lq4a7oY8G1A==","signatures":[{"sig":"MEUCIE/n4jn4P8OREVlWfVIVAHiOXk8VNGKn3aFRLv1RtSvjAiEAtP/wjOZaZwQfNcqVuuXCRGYfbvR37Al6TgcHBeefQpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenaHHCRA9TVsSAnZWagAAAIcP/2Zl8MczpVoZVA/i2kQV\nKS+GMXMBSzAmumkETmaf5y79hz4AlIMjvJSu8op/XxjGR//FnvH2hswby/SS\nHL5/mdQ1+zdEu0fzUoXBsGx+LXjvhvn4FQ7ERQ1X+/kH/LRFa7IKpKgt7Vs5\nJzuxe5Ih8cLT58vbWhbbE4J45HqzqMlLDheAmGa/5BNIyyKGR8wBAahnGh6o\n5Pwt4QkD9k3r/EN6eq4g+Wem8Mx6Pgrr131DdLKrn7Wiu58SwMKQUjhha/I9\nmEr1j7TvdZ9JH4wLI7n4XaqMOkcdhcPys9Ar+ItLQoA3seTXxn/bxdyU3LS7\nKNoyQJLqzSH7hPxCp3b3VVVI2TrYKvQG528wnOk3TmUQcQp2PJ1p/l7K1Lso\nxfL20WeHEnPoXOzDqPSFzoXI24O+Zf0UXIBjtVhwbdkAs/NrqnR0DwrVTjXu\ngttO74l67PHvNk3HD0NuZZUQ01kI8n5rYKpKkX30m3lwMQZfCsTpd684wL2X\na1E/OH/akN1RWSnLF3lMpGxUSlWmAYIwZin5pmv4ZBojiT24/G3MlZLj11y5\nu3uIwOUwcUHV4RRRW1dukopWNF1Q1Zyz9T8kCAj4U1qvMYxePhlIgo26Y0LJ\nGzz3DaLnyL8GFMKk527Y2hSmF1nWxgOP2Q2S9ofe9+M2XVQfr9WiQOz6duXJ\nfZSh\r\n=sleA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.4","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.16.2","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.29"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.5_1587388870845_0.18704270202859652","host":"s3://npm-registry-packages"}},"1.0.0-alpha.6":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.6","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.6","maintainers":[{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"44606cda52a630f7d2c01fb8e7f03ff9a2640d40","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.6.tgz","fileCount":8,"integrity":"sha512-XfSXihWJv9l49ZIMyhHcMI5gBKllHtaTZVYbPwShHpuSJmP312bCXmofVj37CMEV5W6z5FYqoxLeHhQGA2MuFA==","signatures":[{"sig":"MEQCIFiXDl8jjQn3kjgwyPBBZL6ncjjPglTD3oruKdb1C0IHAiBiWwRtviBT843AhmljTU3LoXZ03OMcnPDjN5ymjunEiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesrKSCRA9TVsSAnZWagAAwIkP/iKzMptcSrUxFUydqvPk\n+JDpY9gYGyy3XBtZkpkA2xjr2GndC2aZhiihBaqWFe+FgzO5E2pN2jB1mjWo\nke49TcJqGO56W+Mcm7ba55thmiKp97Mc19KtcMuF9XkfqKpXPJiWWFQ2mMyh\ndl+V6e4WlTjBw300AROm8LXxbbOu5RU/DNNq/4p0EMKON9Hyur41s/KZ0hF1\nm7FotQS86uCwuIc5TY9JuiA669lld8hYVNxKRQw0TlJW5m6qieyG1bZ73yhx\n9XIg3DfLiYsCL0drAHGliKoX9eaSkxlI/8hEllvsKC40zXbaeNnh3EcSVGSe\nD1A9r83zX/K2MfOUIqhPhMoqIgL4scULAXoeySG/IUkCnSZPAyW5Bhdjl04m\niJyimB1jPwG63uoIhjlHK5vYglpiFo7NTKIIqug9NY+/4ef0XdmrQPrDqTvX\nuSGjTsZNspzENvYoemQ0uP8T+Ypl6HUcjIYbiJVPnqtLw8mO730dj2hJzzZX\nK38v8vZHoC7St7pCDRTew13aTjfGutM7DPFyw2uDOhG3H4gg2u/NKh33LdXJ\nLzBerL4/fXRWhYGuJha0V1Lg7zdjrzanyb0T27q03JBigwJldBu1uxrXtTo8\nzWwv4iyJWFwIy5ADgnVtdm0Twbd8Y6iS7xO4MxHNnIT1oOnFWAIPPeSZ8n15\nVHIt\r\n=u9oN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.4","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.16.2","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.29"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.6_1588769426094_0.40878423629756533","host":"s3://npm-registry-packages"}},"1.0.0-alpha.7":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.7","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.7","maintainers":[{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"131b790952738ade4ed9ba7d216934cf366c4ca6","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.7.tgz","fileCount":8,"integrity":"sha512-ORnpspb9uI4hPnzRGrPI+5jQteO163XyKWQuSJi5LvZSThBtYkUTj0mhZwt4CRWOIgKPbuxJecD39Wlcbaa3Aw==","signatures":[{"sig":"MEYCIQC00/Jbm6G+ue2nemV4+FdmZeSKFs8MHl43vUJjQF/pEgIhAJJfGqlhoU4dmpJFAQYHAH7ydqB+MS+qfwuzKpCjZfoq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeutlCCRA9TVsSAnZWagAA2+0P/isJmTnkPGDrO8DTBOSJ\ntX2XjEtuf7cHMnYdjX9D++WWhamC6egR1PeBHsJEd6VPBBKXp0uWZgl2DNOF\nQrfvjdHPiegPZIlP1xvN58wRlKOzkPAhbR3wfM+7kLIkJjZmX0RzhQKdS+Gz\nmaE/CvE3zKNXV7zUh004FJuYNkKmVtvSFcbmxKcXDOHOHOTaBCalL2gfuY64\n096HerSYEJq7ki3V2hCP9XZyaxSDhNyTCp+wWI0DMvDHExUOyd6l0smMZLEe\nbxbxWnR/HNSBYhVwvvYFwabBO/Kk1XplYOo27IvQwk2ZN2SenMXX0P5PrH4F\ndSj7gLNnEhmuMu1wEJVsiIIspJBk8rpijzVXKT/uxIunjGITgCcgX5544mYk\nsoe5iOpS9kkIWxAQSkyQNu2JlA24tl4N+MA07aUp2Pl+rErrvFUskHoZeJaM\n4mo+a6gYjiGSVFKU4aKAIJy6mxNzxeOe7DsdicHB58Yyz9ENg3Fk1OwJvbvn\n6zZPSk5tqJfl5HUDtEIzjNVstqRVXbNYLUckLjKk1yY3QwqlWKLfGgfh9HjO\nXN2VYkl5MFzVuPLxcX+fuhzjw5+j/VMS4XLfTIxJ7qwIPAYfPAJXY/OuGBqS\nBbuNmhrhvn7R8kUbNJcNb2Y24TgjIYiP0U3emKkdLgTr6JsUQ8BAUEkbq3BL\nNlif\r\n=LUw3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.4","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.16.2","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.30"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.7_1589303618522_0.7221687267935231","host":"s3://npm-registry-packages"}},"1.0.0-alpha.8":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.8","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.8","maintainers":[{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"c5e5d577f89b73140cfd77d700fb5a6a6ccbe9bc","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.8.tgz","fileCount":8,"integrity":"sha512-DR2rc7Byf/3dC6iZuOh90KASopseT6wIermM/NriSd8FI7t4WxKtRWulGkQaJWbluLPP7ZGrx2MzuBwTHQ8CTg==","signatures":[{"sig":"MEUCIQD+ItIZZj4GWtxGI1F/gk5YVYVWORPHqKbPbaaAVKmvTQIgPR+ZBzcXLtlgUTfsDEOlc9ME6vBHvo0iYwQagdOT4iQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhuXCRA9TVsSAnZWagAA5RwP/joHaQdmetmNoCKOrnpk\nWSNgD8/X9F4ydOrIldYBc6Tl/xXtNPzW3h0k+gPmVhix+MZPeV2Wqqb++h10\nNPfG6Ed5vJEW6em4JectpNMxrXAc86WM3Ac0dE5M/s4HXSECQYX0iMIERi3y\n3AaiiRVlxTJixAGJs+IQKka/mJfCv0CPnOQNJ0fQIGtMc3CFB40TkDehvRJD\nrKlGV5SiqCSDGN/bRZv5Xko0dxBnWeQ/AobmqhYUZWFuILLxOnuf2+5xItoI\nUBODEK1KOavt1xY7MzH+uXHKnVZfMha5czjb+FlWuJ5ADvwohULqV8lIbdnk\nlRxcsn1cJ+MtbI0opiOkmQFhUK+3hh2PMr8woiqlC8a2VCZjHpuN7rO6mIjP\nbj8MTguVP9IgRNA1GsmEzF4T4Drp58rt9BrWkrDtz7IRIF44lYmD/keqv6b0\nQgcCNqkokCa2tj9m37GkLPUEgNowuy0ksDuBQ2ltP/AOzr6j1tPvv3tx3raV\nEw7tuuImUW1wOCARhzLyncvD48D1XxwxphFWpmOgUUTpoDbJeai9jtCWMtRF\n8Xy97hCLFE6ftZF639yS2ho05B8McYl6qViShfHwOFAelpcXxKxLJLYsjamO\nSYpXL1aVyiOORvL2L9+MGCKHE/b25kKPM7/gPxijQsS9ErPEVBjLwZ0p1Z5F\nIUig\r\n=8Rfm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.4","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.16.2","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.32"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.8_1594760087082_0.06988304559987957","host":"s3://npm-registry-packages"}},"1.0.0-alpha.9":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.9","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.9","maintainers":[{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"2e5a37f95bd9df16921e6e18e19a8141d7b08513","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.9.tgz","fileCount":8,"integrity":"sha512-y+zJefi+aUKyy5QRZRNHW2clBt7jKd7GvB4WMrbNwxoI5QknzqKpi/yBf6BE0bOG2ndrAGzItS5ihRtq2LjwNg==","signatures":[{"sig":"MEUCID/X5lcxBKzzT4o71PutLuwQ9VHViFJMpX5v1yvGCvxoAiEAjBwLc3DNAIN6mbldRps9XyVHqwdCd4f3597IHFG6tbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGXGMCRA9TVsSAnZWagAAbqoQAJ394qDXkj1bzMjv21FM\n3NQGXjjpdZicsuFB2z/Vv/t+iPhxroAI+ZylsUDoXCne+wZKRiFRZjuXWQtG\n0EOdrKZYeZU2tSbsSTQIRx+GUMTRjRP+T/QfvLDharRp4hrfW58XJs4+MS0Q\nvmn3Y064XJrh/DkGk1hZzgq8A5842NDzoOIcA9s1q7nOOnR4PCCXW4v5m6hB\nd4wm7Sn95p2HZYkfi71Q4Myqr/eiJzT926krUZXiz42tSwTwO7nQqSfRC/sS\nFIDFb3P44+sHJsU7eqShDclPW5Tk8twjIJSY+T6IgNWzUTPr158r2GG0gR7i\nae2lsreYnbl+3HhJ0pZdDeTTSnHGg+OM9uws+kEsI0tSUqp1xJGFeL/sCI0X\nYZmOXpcEOSzh0iFKG59+iy75Ktpa7QZCox0kWLkWiNh9VSPwa5kx8LhdC3kV\nl+6qlJZwFXuYnI1Q7+4GSHtVnjaVTYYH3LUcZfMzWaqXoUkyj1y91LNPXDUF\n2kLBPd7JYAnwsQhgWEvPfmiKjJ18UXHZ6DSmvzZTmsIK/esTPSys0bMP7ftZ\nFZBEoAk1BEcepcid7wnZNieKAtx+b3a1qQRJiuzXFrI3SPRM3LM3WfvMWNwa\nqsxAHXuj4leigiCreIajpkeDaveDJvA2ssk/d7SrNpKwXW6nJPSxo2s5i3EY\nwN4v\r\n=K6L0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.4","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.16.2","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.33"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.9_1595502987674_0.49586618286845163","host":"s3://npm-registry-packages"}},"1.0.0-alpha.10":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.10","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.10","maintainers":[{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"82347a80c2a28cc256938117ce5f1292030ff411","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.10.tgz","fileCount":8,"integrity":"sha512-+feJ0oevk6OCP6s1jrW/1akvay2tYwDoVq8eDNIjRrdA8oJi/O1lScJU+6kifZlkOSp8raMvx6PSzC5l/2i5eA==","signatures":[{"sig":"MEUCID9/eqndpF/beAr5fYdMxaLY1hMwCbZzkTlkSX+E9vc5AiEAnyFXCs0ghLmUDplxLNXG7nWbY4zgapwqQaRRE18hXGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSQa2CRA9TVsSAnZWagAAFh4P/3PvPt8OqYQ0K+nwc39m\n9lMfBe0obuzj0p2XV/TgMYn7SpUn0ItYqq7aANGaTdQDqCiRFin1MPYFjcsH\n3Sw00gxjxh64TWFEgdtevL4L4pi93S9TZOX8e7WUICO1Xe4PhnjBwhZdlp6F\nkaHr3NhD3XzCSDIZDKHnNB1B/kZguv31kGuMGlsh5hPHY1UOF314pJaP06CT\nDjFltcNI1+U3Wr0RZWpzPXE+0o3NZi4+rPtMVmStwpfkTGhRQEevLhXFPsOe\nO/j0fpRqsX2a9wL6YnW1c3F5f7X22yAkSqAs9alGivF5L7yzY+sDmgTGogmx\nKMatyP2zUnGKEeaCFHza1gb1RbhED2Af4mWCQFovHoDrqRWNNcyPP9Mo8Knn\n634c2tLM1/bJk8eJVfrcBha3KKeDQPLwAdKrSjptkZ0Eh3D3323iEvnxn5Ta\nNbaphMy6Jkk0+KVBlvbFchitftZZ65CDclhnfQjvH+cbRN/AfPLn8vVmbCtz\nDDnef1Jr18vXV192hTWI48m6eoHMfR0zHt/YP/Du8CgyHSnRqyyIAALEEHcn\n2KYFJCdkRKtbbP/nBU/37hpMynKP/Y5gcQ6Z0Ok+yC5/QcFekvZZWULXKBcF\nNLorFdnXlfGjAcI118xFci4mkRn4og+5dZF2mWByHF+J4/FMNqXTQUOFgvug\n+oWj\r\n=HsmE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.4","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.16.2","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.34"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.10_1598621366086_0.8575196601677844","host":"s3://npm-registry-packages"}},"1.0.0-alpha.11":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.11","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.11","maintainers":[{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"cps-jenkins","email":"platform-cps-prod-account@lists.forge.bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"4ca6f93e58c2361b6ff6067a6d888c833bb92430","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.11.tgz","fileCount":8,"integrity":"sha512-iid16SFiO8qNfz2c+8ttDyM7bXxMLtoMYdi7IKHFaHv43jU8kqxIsI6t2G5t5vx6CddvyjfVLBakydGp530kCQ==","signatures":[{"sig":"MEYCIQC54wOEamFTYT7WZBpfgN7MmlW+zQT1qNiV20A6NvQseQIhAIJuJMJP1CJa28ZusaByPvCQracDd0Xh8t1B1SBxbCAs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSSHLCRA9TVsSAnZWagAAmTgP/jSLlbdPpAKr1Jjxvj4y\nTsZCjh56s0FEIXgKaFWsag2yQSQP/LRtCfn/qLEvpCvtJ5YNdaYquIKhTcAQ\nmChiYHed/qgH7toLjjUy8zZ+W6AFFcJobe6Yp8BmbEjaVOrDAWuXKGpTMLWL\nVj6Kd6EE1/jFPPSWXG4jmWLi2WtHJLsXB9O9Sa1OkEvMnQ3AZeNIcT2uUAzU\nQ679i5DA0XbWM70SPgBoJg7/OjPuY/+Nr2mPQ1ljDbGzzb1F4RRH6ejkK80R\n/Gt4x8ZqWqGvHDhACzbFnvB+70xLp22tbB63/DSVDJXOjG111ioE/dPtWgwb\nFppAvg95qAjQyi03fjcXH4jAMl/MMwhY3zXMWD2XTjx07d/DipM8VktNuKq9\nbYcW1j+ZJM4CFKM60Qe0VttYaEWZKyIJRXfJPgP+YrkD+6X0rrtyJcdYwvyP\nKVF0w5zOgP66h5ixnmVZGsL8jiTI4WLafLyHqCxy117vl03WnaKlXi8qZKEP\nqf8VItbiwJdccb7d2FXVheVkXkOaPalh8QdZenk/TShMBpBg5fCN04Nk2eQl\nm2+At4EA7/LCPpjV0sm7AbUB8D6rTsXo/MyHk86JX0f/zZ/z8HS8+y/ZPtU7\na5KBl6vmM8elM3rtlsHc1yoq7L9gc3ky2GDeX6UvIOQPzkRj4zIu7kGXJFwR\nUuEr\r\n=3liz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.4","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.16.2","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.35"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.11_1598628298646_0.2545890026255859","host":"s3://npm-registry-packages"}},"1.0.0-alpha.12":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.12","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.12","maintainers":[{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"b252d667ceff04334d6939faea321202bcb2d603","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.12.tgz","fileCount":8,"integrity":"sha512-c5y57utfOsM6fVH/bel/KlP1YWl0+I2/0iNDGAhKENtb3hBs4bmeB+6GEVlv3UcyALjmW3SfJBSeVI/iZP8QXg==","signatures":[{"sig":"MEUCIDZVVzlN9c6Q/B4rmBMn+LhTshcpyBUwd9vvQrO+sjwEAiEAz4n0U2Ds6vVgm7iRjB8FE48zfdD5XUpRzGsKoQeR0NQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcwtbCRA9TVsSAnZWagAAvGoP/0LVWhbXtRhOFk+hpkGw\nQGS5NFlZdSWLwW6EPPMmpxBkSg3alVkOQKJTR00+9GVHbOC8MBvGO4IZVtVv\nRvc75zohuvakPbShwILVs3svwfVQoeI3b6r21/EC11Rfz+J7BJCWijLFBtfz\n/8tAzbHSg7woydBpn7Db3Vpiqb2UB8J7dZ4LMSk7evCU82TuWM11NNzEJ60P\nDGgy7FOEqEwrH87IehDSDqMQPfPDnEG55ej3G+vz0WLjDh//awzD5RUeg0b4\n5Y0NtpPX66xy4me5VRmIvCszudFeCfikSVaxmzWLS/DaeSwl8zWjw70zBRxk\n34fjI5PqUQPM/f2Ho2F34bAjYwuhMHop3I/R1P124yS0FjaeR34aoemICAHp\nZ+rX3fax+GS7LKBCCylydszbPXohdof5xF+epDf+L93KlC+nd7bm+L+DYq8W\npmjNtJRf6OB/DMXeJQzPe+HFGv48w23ods2YwD0BXdxijBf+BkAD7LG8gleH\nlohcOMJk+baiU4UAMMruWZ09k91VPrUKjUwJkkW+nGrcxblZMywD6brf1LYR\nBqQBHCIMdoJ24A+7ogCVQ6AU6miNTm83tU/OVudqWSiE0gztlgsAQT58JXKB\necH3Ho4Rsp7GzMRna68eewz32aiZnHQQTFwVmlSJ8K2wp3sIfMfiVMLNXb2H\nKfPZ\r\n=AOgt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.36"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.12_1601375067255_0.34694742355821817","host":"s3://npm-registry-packages"}},"1.0.0-alpha.13":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.13","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.13","maintainers":[{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"77dd2b91a7624ac7045a1de67dc2f9ce4de25fa9","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.13.tgz","fileCount":8,"integrity":"sha512-XJQtXHSwByybujF9lwJ+SjE9F1wJhzopErx+IhAbK2Zp/LFp2SaBHKqYpfwgv33388QCbABK2d3N1M8BpKh9/A==","signatures":[{"sig":"MEUCIQDV+qY4Z+Fojhgm00Zsv8xTF0+yHIM7uZUtZD4aO5p5TQIgJlt2VnD6i1LZx5d8+JAqS9H/CV6Xzd9b0fTEtSd6tOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdyHcCRA9TVsSAnZWagAAzpAP/RMqL5Sdpx7upFCwQw/r\nL7f6yDCX1HXnBaryHsA9y4T6fggjJd42xSJxMtGs4teYkopIPZyaDBWjUztF\nZUTo8/82tEY21oSgmR8uBwbQAKx7yAIc66mhtrt1U7xmlMXPrphwXr0MVzrZ\ntS6RZVArzEoE22SQT4omNwJ2qOM7NUS0/b5bw/+LGko78OOhPnsf/KEejTJR\nnVfol6WeiF1AsuijcwpW4inOGHL/GGGCz7Gu9fIxrjMAg2wMpWk/Fot8PA4x\n0gw2AJcBLCG/PEJ5lvQJxbCE+a/l6O1Ylt8arHqKXlsiZj6UMQ6Hash5dAf+\nVUq+5noyb1P+GXWmF+sJujo3FFd4GodafCx2tepqe6JVQ+WzZxinVrdOMbKS\n3/qzZ79LwSCjwk+t61AIeHQSMP4QQ/9q7Kwf9g3lTp4UJz8rXJDVMBmeEic4\nNBoEliNoq0Tlp8cgNoqsYbTteXBVVpWDUK6t7tRPkv83HNAIwUb7RzM/1wnI\nF+sZ0die+k4OsQ12UHqoqiKM824KMxt6CETuZ5aHmiuCJt5unftSrI8hDtt3\nNhiWHEfQak/v16MpUJY1843XzyFY6VeUujEgBSQIs9vPHe4Xe4eg87yhLblN\nxZ0Im72F6KKIdfKDaEGPr3Otb+l2I98cMf94Dh+Ee7NAjCq8CL98YUKYZbuC\nsUdL\r\n=d3m9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.36"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.13_1601642972238_0.38256541961490753","host":"s3://npm-registry-packages"}},"1.0.0-alpha.14":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.14","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.14","maintainers":[{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"7c07d5eec4f7935ab70c798e3b7483eac8d78119","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.14.tgz","fileCount":8,"integrity":"sha512-Hvv0AwmKF2K3v+cHHzVPKDmJno1d0ykMHE8Sc7rxLP31IWx+q8BdTkQeNIJ7/F5N+qYltdANiXRBDwfq4Y1yMw==","signatures":[{"sig":"MEYCIQCuLtjbdCEFCQsU2UVm/Z3HtNArcLNTSFrI5zG/C/mSzQIhAI2MZjVRoxY3XSi/7GpWNOZY7D4p72+SIKm6HiGsRrWx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe0XyCRA9TVsSAnZWagAA8agQAJMp/VoS5LhbYQhcgenj\nP4ETanM7f64aO4ZAyIglMO5HVlgb5FduF4N0+ii/0p+DLF5Lk9sjLouaSqER\nqZSB06zs7AVaSem1BXbUX44no9yGr8OEEZObcv9+1r2KVstcXKq2zxqScXaF\nhWJUR7U5ImrpsQSm9KdIzOc/xOZIR2m2bbEWi/nBq85g37sbaKWBLhKNc3Ic\n3h5iQkoOCbcmcslDTMtaBTC+uF0mYRCJ7Ay65lZhZMtI4U8FZIfEGedSNXiv\nbrsBxXfQAoqCOGfEF1iTUpvYFOxLebln9f8bID6dL8FFAhyKTPxFJOHW+qQY\nyhbSdhR2yRxH7cenBeNJY+1pb8QBC6+fiJQdruSlJRQntXUWKDBtwoX5+nyx\nHz+D0HK8aKtYXXaf4fsxelAzlNicJALBETj9lBf4iYME+OL1OhPOoQdj1p5h\nUE2/xb4g4QTIFMcNBsFbLcbeS+NM/vf8WobBruKiwQIdD7Olpja1/hjpq5uf\n0hg+hLYkir5vqZCfzLLRXegP+/jSoF4l88Q8zPGbQTOySRu8vyMX8lSQLwdf\nfvWioiw5YUTTQr462+GCSfauVQyqLGxxwUPrQehVlyqR98pQAkmHz85fbpjk\nrUsfJbPHPuSOx8ui9jhIqot3IdaUm42PODMjnP2O7gn9+qZb5zCfAf5ia3ew\n5tXB\r\n=a6n5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^3.1.38"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.14_1601914354023_0.464195051580776","host":"s3://npm-registry-packages"}},"1.0.0-alpha.15":{"name":"@bbc/psammead-content-anchor","version":"1.0.0-alpha.15","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@1.0.0-alpha.15","maintainers":[{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"7efb3b6a88cfdb8e8f19272e0f0f40ecd7b21c34","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-1.0.0-alpha.15.tgz","fileCount":8,"integrity":"sha512-EYMll7iZkYCpQkI0atJb4py2/tD8SCAr1T1pQtqkbuDoWDLHlO0IiVKngK0OoOW0DcHRFRYDsWmh1FIbJ2cTPQ==","signatures":[{"sig":"MEUCIQC2kUcHaLFouS8xsYpqVsY/g+ETbQECo4fRdv7iAFV1eQIgTizmeMZQ5te+vtcPw5FWQopj/uetzIILb8VdzOvJP8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhayxCRA9TVsSAnZWagAA7hEP/ijJq8CEke8sHyztTrMx\nyGBQipCtKy94uxiL9cq5dVoAfclraiSoPB5sk/fsBb/iv/XVtU1TYsXQA4wZ\nMjIz3BiskFWlLZ+x9H7IhtktrpaZvmAZPxoWn1D6IpfMKDdf1PiM7vLhRUUV\nUeGQd+6FX6chnHFlpoJEYEU6mTpU3V8q/E5bwaWhzsEzz5ZN28urC06eMcio\nBEkdWDPzdwi/RVspXJAWU+KCMDxgd/rBwHUBewfrNce3z67kMVLmqhK6ogLy\nx9tcWDOcM7HUWxUcveR3xt78IN5yVILFVbsa7zMiHEFSBMZ4zgdiCXKuUagM\nyXXmYbTqAW/elhQ9mz250bPwPuqgnIsyn1auQ4UD37XROK5r3h3Y0Fs54Mch\nIZJZ/BBslxvuzxhkje/eyW38s+LVUzh0IHRvswG9RMO9xttSkMxz/WDtzQno\nTo45Rra/vtT43Ia+KKrHet+ruxk50DwHxU223Ncv1zeGixeC87fooo3HEUl+\nTlee1EXJyXYRFlGtcKyj4B1ZJRhoDhWPBuZeWHmoSt6pgI28RfCuNx+O7ItN\nDclsIps+StcLq3wBVcYaD2CXvwi6SMwgo+oeQ/MBNJZl8VZnJxh2bneMn1qP\nvXD9+pI1GGF693ZnxhDRyRcRfGvWy1juRmCfhMs8+0wTFh3Ip2SzhA5YJEBV\ndSTN\r\n=I+F5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^4.0.2"},"peerDependencies":{"react":"^16.11.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_1.0.0-alpha.15_1602596016710_0.22855102976278552","host":"s3://npm-registry-packages"}},"2.0.0-alpha.0":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.0","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.0","maintainers":[{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"56b7fe15b1bae22e831bd87b7fb6692d25a12d71","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.0.tgz","fileCount":8,"integrity":"sha512-pVYoj11Bz5bU1ZuC6OWGovceilYJi8yNdneajj2azqv3xT/zwnaS/okyW/pHVvKooBqIvMQWikEQ1FXC3UvJZw==","signatures":[{"sig":"MEQCIEh/OlA/5/zxhgqNuEdf1fvpnK0fgoY6bkmQG1MdAQGDAiBAYafNQ956sVczpHXE6858eFZhT7X6uomTi35VRVw4wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":76533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiEvVCRA9TVsSAnZWagAAkh4QAIfep3vLwenzvMn5Hvfz\nj9htvgvzR2z2gK27VASd4anFXPRWDnnQZjIiW3XAc+1z0lFAiEbBX7k9BrOT\nMCJUZuI6Oe4GIHdg2addSQ+MboOaDjazECsZy+5hykRmnAaFADPISK9A0Num\ndhkvyht51bs6aSVP4UdTvPIA5N3Kblub4fdmBFhXGMyP30J3TH8TnYBWB8gi\nbLYn3OX6T1f9LLAWuYNGBZ813b2vb3OSTwKr3CJT0wUEjcLMt5D5+l+WEk/F\nVG+1R1k44JbmMwPPoiZ0++3UgkCPm9eMHKYK9zAEvWoVNqX2c0MuZGaATIzC\nQkDf2HIuK9wrYZDMoxrp/VjzlPf/WC37kE0wGIypAbsSrnmcVVB8/q/xxU4I\nZpX0iKYPUaqF5GBe+Xjv42vwmSz/ImJyGbrH7YFZo/gQYPIJslNHYG811ISw\nfmWCwHo81bs1RqwjCnbaneOavkt3JB1ECzATO8mCX+Tqq/b8wIz35v1Z5dfZ\nkDTa6o1K50s55Ukb6/Vp8ZcGmLwpE0ds/YwjjwV9JFS7DLAfh3nZKDOeuzxP\n329uKBzuhP8VvlMqB570/Jdefc21/HwhsV/y0mNilT7g9GUurPTJz1f6oCzZ\n9AQQe3Ql/DlF4UX1u0/rPP4ysn2oKK/fbWGdTYadQbz8ouZ7SoekgtpTbOqe\n8m9c\r\n=uHpn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^4.0.2"},"peerDependencies":{"react":"^16.13.1","@emotion/core":"^10.0.35","@emotion/styled":"^10.0.27"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.0_1602767828939_0.46911868687777813","host":"s3://npm-registry-packages"}},"2.0.0-alpha.1":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.1","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.1","maintainers":[{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"f17c5baa02464882254c2f1e85f960546a685ab1","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.1.tgz","fileCount":8,"integrity":"sha512-8sxRq/KjK5jXlAsDysNK5w4V/1RvohGxREIJUtBT/iK++LO0MMplEsQUfwzemyLvnYiG0xJflu9y4pXh6LjmAQ==","signatures":[{"sig":"MEUCIQDwCrLh1dnvpggy+yUlAwA0uEpP+lfdcCNoHXEsxDja9wIgHYcaC8mV5rL+Mc+JmS3HMBA/IbVaxYZJAZgFrx1NqrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":76657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiYSGCRA9TVsSAnZWagAAeyUQAKAS3S1eqtGLOIbeKd6H\nMbO6eIK/II9N/xH8dq7GeuryTtvLWCIDVroithb5dP546HnmA/V4GgIBFdDI\nviadKxVo+AYPJxjdF+RnqTcWHCAIFKFdstQO01omlTSEPmj5+pVMnVTQQ5sH\no3iIDtzaQOkr2LESPH09xTO4aXdqSViPLQcwSCAtGRyUqtp/NmXgQmGO5hKI\nC8jIbEcTu4wt8+6LRIeQ1Md6Zx9IcVX2hlTG95glSDLK/HmV38UG5LQ/Altx\nJOHy+HxqMj5imOddd6pQBwrFCxl4LtTcjh1KCT0jjfXmz30b9vY2fmNe85Tv\nxSiIxfYIcErTG83zYShMgrz3PO+zyzW5WePmBd6QzqbVXEoDbaO6EJMIcyt7\njz2Gy7Pe6HHVqdyBh/3S2cMZ7ADgE55PDsdxgDPZzIvVxZHEmmxTif29tuu3\njWj8+Onwfs1AsbN+UpFcEM/S1muSNKpPeYvCkSyTBCN7NPjuAIkUEQe3LfK1\nXhjQYQhxtu9PMLZ88i5/vRWmObdgyCa0xmAmT9toqjrzdhuBKZgPJu5j2PBt\nKyglz7HvFgZN0sk/tHinreFdPxk9dPGNcT+hxZ5kuNWl0fj3WCnnH2qO7Uss\nK4bh4Dpry9Txo6gLGWplmsLBiK7t1EKcyZJx5Dj9OQ0LOdZaVkc4fcuzT2jC\nmui9\r\n=pxkv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.0"},"peerDependencies":{"react":"^16.13.1","@emotion/core":"^10.0.35","@emotion/styled":"^10.0.27"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.1_1602847878231_0.24661888856999825","host":"s3://npm-registry-packages"}},"2.0.0-alpha.2":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.2","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.2","maintainers":[{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"8fb12c1ba81dda150c9a25ef92e46a2c5b489744","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.2.tgz","fileCount":8,"integrity":"sha512-EZsCzavAi6mZQgy7s4LxLWQtJD3ebT8FL1uRHur+0Dnvqx77y2SA9VgTAjGWVZaL3DOZaloNveyia1gXPDIhPw==","signatures":[{"sig":"MEUCIQDBYiIL2qi/qshlMbLVmzPwtC7Pm4HuSF/EyXCk7Ys8HQIgQq/WvPkZYhIpWtMo6zq7IZHbwwJ3z9aSEjLpK8MYmt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":76781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjYOoCRA9TVsSAnZWagAAmpoP/0usBnjKqvDGwQJWryaH\nrcMG7t/RpV/osNNHvAerb8DQzx0oRZ2RfAI6mbDycjqJ1wxk0OPFK3NWMLV1\nk+WziI6UWzLFF4ZA2MuxEXEg+GuEIvrLkDslteVNzOKwexTJu6lRcuMlgxYG\nHZn+tffi/AsllEvkTK4qoYMQyI5l1brSGbguQi0t7NqtQWgcqdJZrEjBgnpR\npLdYq0A5WnAU+rFwJMKVUEAVM1jIvmWRHYl3ST863XApuCVWLvUUkqhLaSh7\nnNXeRRQHcWCksY9iZOJIzyitWW3JEj0HIVYgKbao9MWAYdxzuK6pUIE5zoTS\nyAt0RRWNLCvq/vYRCWX6cAzDHrBUqWxnuEL6KfJ8C63mUFf7yUdT9a5j+gop\nIDr6vnw0KGEUs1w65Vvkx5N1eit9blVZIMSCLlqMxhfNZpbzehYmfL2Z6su5\nDi6XgqCJzzy1JQcnBHQL0kwwJ5M1UD1/cHmn/k7rnjs0lBWoJrPwbFdZyWOw\n2gFBLnlbzB//s35pKl8+UmWGGJvahATHTB+8WVpXysLsll/8ykz2OT595n7h\nDiMt/b0rGefuIOlRBkvL7SbGTv1HJl8BgypBprFuFt55l7xewY6St8nBU5zo\nghJiJ1rmoe7GljTWBz8+ywyBnilRYAJxeDNg0F6fM4n06PQx0l3tnquZW4TV\nKs6p\r\n=uBsS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.1"},"peerDependencies":{"react":"^16.13.1","@emotion/core":"^10.0.35","@emotion/styled":"^10.0.27"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.2_1603109799635_0.6924527331964341","host":"s3://npm-registry-packages"}},"2.0.0-alpha.3":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.3","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.3","maintainers":[{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"69fc8c65102e9770fe1c95d9c762e5a24e4683cc","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.3.tgz","fileCount":8,"integrity":"sha512-NBzDvsah3/dhxBkmXCMD4Ft6ip/xhW89prBLGUMmzSxAbPzyiWCUeJ60cq25EMC3d/qYfcLut9itbfRVg8bU8Q==","signatures":[{"sig":"MEUCIQDdHc/+sPtrwECu1EsTXbsXGmASwftrN8IwTor+tiFa1wIgPvMLXhP2LDjndjxTey5K1pUtTMX9ivuUquS+YkL/dzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":76905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkKzwCRA9TVsSAnZWagAAWRsP/iCvaiqkFqST7ck+2dPH\nZfmNkvJ4nGOec4TXphj/KAl+kLvPZ3adab3MzOBO/175HxuJH7LA9V9vCssE\nJaaObAznRVXTBHE9J9LxLirm2blrzL/m7/CVbwd+j2cDvD2H4PgFmSF9jl0a\nvU8bSwG5ya/XO1AZdJ0AJUOc4jfXuy5oY4dSdFNXOxpZwm5fSy6avrRIIj6J\nr/vkC36TAd7t9mV4zrS+53hp0t78VbrIEE/mWCw5WUfurJVGFF9R3hb+W0gc\nHf8JlhjZmPUNm0QY7JV4OBqlxAXWiJNPmMaArO4IK69tqDZ4TUx+t4V7YlGp\nwDQMLqw0gpvK9KgMHzknM8zp/0sTylb0lN9Bf1N2Vt43TqwTVgg5ujpXqdpX\n3hJsMGUTPfaSMF1U/vTOqQZ5K54Ux1xoXvjjzlBKpkGfxcg2fdX5auMLMFbr\nub1Q/2XVMmKjw0OpEvnrnI/JECBi1bayPkd/rD0ik8TK5k6FGJuMNCUdrSXd\ndSB1w6zutlq4l+2AcqD+BJ2Tu4Ty+VlQmDF6+wzwoXVZdRc7o8YRKgX/r3zs\n1ELecf0KdIZYsSpI1W3K4L1NrTVnapTcdgJ0qW41STQ6Y/HaPM5t6sxwdmtm\n/+yDEXjnendto9W81LXwMIlfYffk2oRyNVqTJnP/aB2qdOfffmaw3sJuT710\nzzjY\r\n=/VQQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.2"},"peerDependencies":{"react":"^16.13.1","@emotion/core":"^10.0.35","@emotion/styled":"^10.0.27"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.3_1603316975865_0.053485158883463946","host":"s3://npm-registry-packages"}},"2.0.0-alpha.4":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.4","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.4","maintainers":[{"name":"iplayer-pc-downloads-pipeline-bot","email":"simon.gregory@bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"113bfffba8de5a3874c0f39c838d79b8cb5bd3fd","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.4.tgz","fileCount":8,"integrity":"sha512-6rw9JlhxmPjb446fGIxwvP4ShoHZ008vE4mlugH//w7dqaGvfOhGBf21Azj6Mk32zsccFJT4w8ZPFE3tCOcHow==","signatures":[{"sig":"MEYCIQDz6RSx1df+K3UEGY3PmgaRvCdWF1ICqaKPC38wkELNMwIhAInearPROLi4QQU2Yr2/cNF4/cq8ohTnzCyiJkPV6rat","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvOdVCRA9TVsSAnZWagAA3D4QAIwg9ozdpBFENHJg2U+Y\n+yKv8CjAMpnYFq7nRhYkwoQUAANGhqDza0VM6Zx5SnG1m1YmdZ3myzEeIdXf\ndEePvhlvAoBYo++yEEVSwc9JSFxcx6Xup+5YaQK9xlvuE4Mjg5neHi6XHp9k\nbP5g/HVGX35sVoulEYbOCJJdECA1PqvuGgTbOsDks82/EjzT5xMnVcKEZQ1v\nmIFrbVng1VZhcCUcB8I2G6/bocqsKhpG2g7kyJAFooq61cFoYV1h1vIKkcDh\n5khpi/M8RToZz/ff+uGU44yuPp98A8F8tJvr2559aFa8u4dEdcuO8VRL2U4Q\nSqSQMSqqDr28BKYZ7/YKlwcNR+KpVRTyurHc7FGE+pBGH3ILmfuZPhirPS/F\n0MBNyGDpwfO1OXHD3Knm7idG9RM4R2U0mSxLQx7K/qAxgC5UQyHt9SjOjOmq\n9rOgp2QkA64KNBFHZ67dlVOxb4zTHdwIR8JbNccZ9lfXnLISUUZIZhUZP/js\neNL7lmSgh49oUhLSOOXEfF2LNLfGUU6mVTicso3NzYogpvWJEM2SEzwI/Sa2\nV39p11yGjkbQDUHujo8yp4UcaNoGK7caoMe1UPbWylKPwWYRQllHnvguRNzN\nUnWvmU8X+ndNZsTF6WST08r0n9Cl5CKjvoSetbrgsL61m8fQw3DlPyGTqmAh\nXsjz\r\n=1JCm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.3"},"peerDependencies":{"react":"^16.13.1","@emotion/core":"^10.0.35","@emotion/styled":"^10.0.27"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.4_1606215509597_0.8821397421784329","host":"s3://npm-registry-packages"}},"2.0.0-alpha.5":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.5","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.5","maintainers":[{"name":"iplayer-pc-downloads-pipeline-bot","email":"simon.gregory@bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"d54a87054111c355220f47d690d38ee3a207cfae","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.5.tgz","fileCount":8,"integrity":"sha512-mmhf4Od/VuIhNQS68QPTOV/wyZZrvdbvV9TO2lVFkEd1x0fSEi1r2MWSCop/6xHHFErs4EhLT+W4lCDZZKIEXg==","signatures":[{"sig":"MEQCIEzKkXyEYJlH4AFtOFzk71w9AyX3/tsQzm2dTMWsWLIdAiBcDqj/em8w+vs/5BIpstWJed7pAtlxvgEDuHT5XDgQnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfv34mCRA9TVsSAnZWagAAy70P/1Hjq/Bv/MQczqxQdRgr\nA1C4FK5A3ULmcDJEPyJxzGeoahon4HnLfUUuVYcrUoiPiducUWd6xopUhW70\ntoFJHHuVkU5H9z3nKu5DqBNfHzcpyh9Nl/xDTkUvsglp3qF0FgwccGmhK5R2\nXpSYGWlI1eW2QPV+AHAGLZCs6FWKjDIUF9VYCtTgv3WYP87ENX0IAhCkyq81\nUwytTL/R1EHZvS0MmKI7Mlnah0KtPxUOiG1M0+TdzWIVpt99SoFCqwfJwCtS\nBjXLO3w0TLrvOSc0OtmI/7eKx3sUwR+/LGbSUaNClqIyQqBUzgG8mmQYZoNc\n//axW9zYaWr25VTrmjHtJyVtlvPzCOVw4ovNPXl639Ks5refwbbliajtZXrb\nNBgjzly7ZXOwJsso5dFE9jumSrcJK4QRyYhc4mzc7xjp61d0xKc5p0fhiQzR\nZhEBHKJ177iFkBTKVIIjnGtvKEvLonbdVTaScM5i7SlrnBKetMRvB7KrGGY4\nqn4aJb4eMNL4ap4vOEoQMxQ6lRED2kuRoO5Awrul37WmT/Mr4A8VayIvVOSP\nb7waGqO2gDAhY/IL5o7QNbh93mqHz27sXTFHgGdIL/yGOR/QCFvuCQMPyMb7\npgy4CA08O3jf65FC3/ucYv6OEkt3YshPQiKly4OvD3dAnvB1j9pqbpsBkT/J\nWd8/\r\n=43lt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.4"},"peerDependencies":{"react":"^16.13.1","@emotion/core":"^10.0.35","@emotion/styled":"^10.0.27"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.5_1606385189932_0.731464132074165","host":"s3://npm-registry-packages"}},"2.0.0-alpha.6":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.6","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.6","maintainers":[{"name":"iplayer-pc-downloads-pipeline-bot","email":"simon.gregory@bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"52828417dd7a60f388f93223e66b89c2ff469ca4","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.6.tgz","fileCount":8,"integrity":"sha512-PIhozHdmWLv3w8+LHqxq6sB9ff89oNHWwIKeGyTkEw9cS7bae93zH/608kKBGWh+BWk9DY0IWLs4fzWfM5+3Cg==","signatures":[{"sig":"MEUCIQDqiMobJOb0s0cTSQkxxGmKatZpgPAnLJpmEW8Ixj7PrAIgRNxGtED2dwtHsNVF80yMjGv2oaYWG0llhKthCjFqs1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxmotCRA9TVsSAnZWagAAC70P/ioRmqaDp+tlwYWssIAl\nag1MBXEFN3ScvxiTkEiGE2oy3BOP8POY3z+HMFuwie+OAFjBSgcSTuAbuctW\nqxvXsRzvUPdoNlkTJUf4CzYBVKKClJkbSLpTAitanV58VkiF4g6nvG4GKzFx\nQXEtQGnodxhdtPliRM0BNeIX++2QA1qpbfTXU9ujgWZLEYq3knxtDJCJwPwy\nz2k8+HTaN80qwXdzsEh5DPIBUBgRwAGOoJkEf7EpJuKS7BAu1h3r6rOJzuF9\n/uELc/LC/cxYt20BOhQRT4ahqgI9rXwqCSuaPt7I+2o+wrXoourCvnnoxcK2\nGGWP4QsfLxMsApnEilql94jcOLPhgXpqtENRQTL4jRHCgMeY8H2Qze82XoBc\nWKvQt9kpwy0KRsZnoVgKd65a7BGsjLl8JdvuppqPM+x387T2R6z3h4uWqPt0\nbUD96X4xajTN103GeDKxYMRtad1e/fLCiMqLv2wuY3yCfkEIih9NXV71bgFJ\nFyBSSb8lhhaSi2u+Kt6pS69pbZ2Wb0ZaS5uV4ytCRWIxo+BvrVP+DpaJd+NP\n10zWVfqN0+U9bn41WAYfBITmvabKCdUeDGN/Enfu8xL5B8tNrKupyLcXDajv\nFDNJGyWxPIb+BQmOdrL03/eUx59rkag7H4pnkD5wqAR+mfB5GLtWTqaOkXfT\nslbc\r\n=aLik\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.5"},"peerDependencies":{"react":"^16.13.1","@emotion/core":"^10.0.35","@emotion/styled":"^10.0.27"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.6_1606838829512_0.6755936933213467","host":"s3://npm-registry-packages"}},"2.0.0-alpha.7":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.7","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.7","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"1b34031781a861bb67c545801d59ca0a12dac84d","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.7.tgz","fileCount":8,"integrity":"sha512-dE94siMTFdyQ5S06JrsFvCU9DV5OUMMbzoXZL0JbZfbVbNTKa+MoxTTPTYJcoo0loWegSjAbBYyzSvNJUMkBsw==","signatures":[{"sig":"MEYCIQCykiKuormq9kaqt+RQG7scZA+ci+IMrzy+dkymeNIGQAIhAIjfDz0jmecneEq3+p/k5y4HfC6BTNl09K95wGi9WPOw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9xLsCRA9TVsSAnZWagAAROAP/0c4i49RwuAN4OaXHXIF\nR7oo1Yvo+JkT89ZNAjocODmkRhxQ9rncTWTHNsco0zsLJEZYH/LtPdJvIihR\nPNSZBKGSZ+/DFRY7S/xZ7tlttvXqvclywv65sNH6QVMy+54vf56rubgN55xW\nEvifNMkyZFeWGGTOoFUElj3465xNyGHUwCwVtFEt5zIp4xds7aPvGQeYxOa+\nkUqDodrT/EZLj6dtl5+WdG1YzE7srm/wp9Sli3xPHmCCyDAWLYSUW+Hj0fUK\nd6K2mb2wgHH6Sy8koBmPCbPIU5SIkqq5Yl6TyOtAV3fUtUWb+lqXL/mt5tXH\nAk1tWBGrq/kOAwhwXFL4tAZdIoMi0CV43pR8vkDSVwyHvtBO6zZWmEow4vjb\nQ/WjieFqd25qGbazoyoEsWyMIyQx6HG76BAdXtyOWnd1ozksEV3WkJgJU933\nBW+30FOJq2WZGl26unt2PkFDaY0qZ5WuczmMnAzsPdSAbQ0iDYnmxlM6Uwop\nBg+nJQtep3uPJjI+MBvtEI0GM0O7rbaB660ZiOaOfdYRZAom5AHT4XuUKm18\nVnx88sRcGDiX5X5Ey+pn5oX3VvA7q08nn3enlkjCzyjRl/b/jfWVAEbzhPiq\nZrLj5s7LgKAlmJQLlC281zoA+9au48Lck9Xgl/TKjmE69dwO+DHzV6J3lRWI\ne6uL\r\n=4Qcf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.6"},"peerDependencies":{"react":"^16.13.1","@emotion/core":"^10.0.35","@emotion/styled":"^10.0.27"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.7_1610027755706_0.16975632399661356","host":"s3://npm-registry-packages"}},"2.0.0-alpha.8":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.8","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.8","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"93c3a30794512af7a2be3ec7320fb5de2764d898","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.8.tgz","fileCount":8,"integrity":"sha512-MOC9gtzOVSTOCScwCH8fGN03fJMOFyvzw5+0qDda1lDzuqMA6rT5H0KGjRfWA1OSwCp92sPzepf6Y1G8m6kSTg==","signatures":[{"sig":"MEUCIBDtJMwMXXViopnzH9/c9NjmMoIWgqvI/GmdhzEvbiGGAiEA5PTpzPxkwJhKjpW597crMo+gL1Pq7o6ufrRNYolsKOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77525,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAWwoCRA9TVsSAnZWagAAqa4P/0Qv5ik3kNeO5UWVKpbk\nyHeMQ4RDMuJW1lrtSwbQgemuCWoCS+Bla5zytoccBv4a4wAMcuMzBV8R85ak\nW1I9xT5vekdG0AHuB+VmfTsl78GAJPo5kHVsmSAKyGnzVYVEaij7YrkZjm2U\ngoCEthy8kV9Ur99iSDhL8QxVAjgGaeoAiGAaCJwa1jBazdukAxN9W8pG286K\neNPPL4NXjRrrBGYH/uyZnla7UrsACXckpg/GjVMyv3G9BaGiUsVIZtGvcdVv\nb6TNcdzX2KJXYHmGLbF6QXNJi8zclhcW5A3WzeV7Uj2mCfLzLhucAtpNRX25\nVUBS0vvbfX5il6d7HShbf6zi8fe3pTKm3eYXfARfdAkWS0I+7JjgPKQb1Olh\nYKDovvoZ/SAUXp4pNPLx8kJxD8c0KSW9fCDtn8plUFu1EBWkG8U40BMxooxV\nB5A2LQ5OkZEUynyfB8itKB4cn7bKznZwJc/0nkngFrw41o4ZwGLtK1FImr0B\nTByHrNaIAvAKpRoF07qIt9HQe8iEqGAek1nnNbRqU3VE0+0F5fWEzRDo4Kgg\njYfw+lA49N8PvJo4aZwp3KKSfjInFuEYpIPBW4Z6pb2MG8rxMRJwaA76QsLF\nYpNnn13bP0cwIgOEbIbvoEHCRnqPgfrZMpMVxMC3tDood5++0Qaq5oddr3WH\nqNtE\r\n=q1Nf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.10","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.7"},"peerDependencies":{"react":"^16.13.1","@emotion/core":"^10.0.35","@emotion/styled":"^10.0.27"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.8_1610705959605_0.954663277852325","host":"s3://npm-registry-packages"}},"2.0.0-alpha.9":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.9","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.9","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"12fc32747754042ba09a72cd2f21fe264253aae8","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.9.tgz","fileCount":8,"integrity":"sha512-DmM/H4JKh/6IMcNTgAnBd+5RZ4AIRsq3M4UuCyDy4L2SaMV4tY74UztWhexAVjRhfx4EBmGmy9jBwsb7/YVMjw==","signatures":[{"sig":"MEUCIDti4HYuriKh32ELUeAdjOo3lHSJzKC2FdxGjCwGMgMbAiEAszrnW7Phb4MF9rgaPiBb5co+AGaMJstb68vp0RZv5l0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAZR5CRA9TVsSAnZWagAAyjAQAJcqt1QGPAwvhU00DClt\n93EdqCRBAHvgk7SuWZ25WRkePnmyZFf4QRF7qYpTzxoH6kGmQuMZFYBIJTH3\nTVIeJwOKWXnogh+BOD2SRmQeiN5H7ZDQ0HdIRAiBBQY8F2uZfgbqq5bJuIFe\nmupJkLSzKzqFOLUXAzo143IBta1uRHTy4j7mGxBZb2Siic2PEyuaS19Mfv5A\nwxVd0PW68NLcEu45khE9B/skSdfgXzVO70T8Mlpu3zxH3EHx9e6qWu6Ukzen\n+Ss5Q3i7wG4XSxxTSb7ij0u/F8ZQdSF0TH4V5Zr/FQOau1VVB542xwPm/vDG\nRo+h6fHWSgUWwTZswsbd96lTedm8Z+el2IICvBId7M3Z5z02+/uWAyHGbhGG\nuKhUWcxcNyHlVEXxcl4q3K9YHPV+OOS6zrRtYGEMTX+h7RQ92NaCV9H7ldAD\nLUtvv/NkHnqxLBa9B7IYuqrAmsl+LvGrEyVZ+x0MNIaXwWGdDz9VGI1ZGWC0\nC46HwON0tXP1ydSsUE9PMCfZOyKM+BA5LDVW2PHzBgsXDZFuIwHG+PaucjiE\nrMUHRo8Mr+wzT18PCagzzdHXRROSz1xYlCxwVk+2OrCCXPB+mxqblr2Z1C8+\nNxMPSRgwUiNHkOOJ89PhdBBuCHnafuUkCpVyMGO7UzJ/HGdjIBQ9T0TAKXXW\nctXO\r\n=ShTq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.10","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.7"},"peerDependencies":{"react":"^16.13.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.9_1610716281170_0.5952087324016222","host":"s3://npm-registry-packages"}},"2.0.0-alpha.10":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.10","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.10","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"58f050deaef0185ae442b05092ab4b36fc5dc36d","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.10.tgz","fileCount":8,"integrity":"sha512-aW1VjIDWT1u/au/+UoPYsgJrsK6jU/5SD9FcfcK/5vRSJt2yzPjMKWnMsBIZGE5r7etGcb24dXiGTzko+EkaQA==","signatures":[{"sig":"MEUCIQCOBK6lkmii45MBJ6D3RBSQKdOpDQlNcNA/WRvhvdXgMgIgTLjiEeO6urcyFBPFtqW1pE03yd+0qq0ocsD8GjMntug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCEUaCRA9TVsSAnZWagAAzW4P/i39+hcrY6tCoBIq6Cgb\nGQlh/SmwpD3Xl34UuQl1ErzmfLcWCN1SFoDvb6xfGkfW5bUkcrmNb7hTtTGI\nv8CNKcFtNySk5EpQozbSz++RAoih1stAMPsvJiSVWZ35YsdlgxgjeWoX9M3x\nGez4IHKMAUcTfRqa45fCJ5qKV2gSJSn7lSNAGjcctRS01LMB8RMvVnyIC1JD\nv56E0+2EGkWPEvsUGn6k90+iyZUOQXj5dlav58RldEHgnkI+S4cr1grQl/zN\nThLxSgbMGngT96OFNGDOdAQ0ydecOaII9IsGU8Apz8sNP82emOjBeAVqvpPC\n5/H382MvVpFwgzi67kff4zWYGjknHfc/COeJ50Sv4RqdtQU0wFR8eY56SZW8\ne9MGJosYvnpwZpCHDmrSt3xvY1FBf9evAxIPq/f3dHF/dkbmnp2WdVvBXQJK\nEmdgAleot9B2ro5dxIw9t18Dlnrv5uJk+niA0jWK1yTUdBGUW8nAY4foUZfu\nqhYakZ+YUTL1I3sM/6BNkGQTCpeUZ5MlrZW7zQXn6RCpXThIEquRFFFT8mS6\nwebjzXdmpt2brLE1GYi/0R3qoiEp3XCMIJTsRQwYub2vHNt9FYVyY7yuCWaD\nhE3iBGTgX2/jaiUOXiFVUZq7CTnOOMAS518hymtXDDyC1wQv/EpMmsxILIKU\n56hi\r\n=cvNs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.10","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.9"},"peerDependencies":{"react":"^16.13.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.10_1611154714439_0.3504921329382329","host":"s3://npm-registry-packages"}},"2.0.0-alpha.11":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.11","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.11","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"559063a55e2b54318e81269c367bb6b20af5f878","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.11.tgz","fileCount":8,"integrity":"sha512-89PqEzDwVjGdoYQBwdlErhnbMBkLGQx7KnZckSMWhQ14ym8FyCi71FNXBgrWL6g094X1uI+8OMJVr2HkKZ1Nlg==","signatures":[{"sig":"MEQCIF7T9W82c8Co9JQ+IdWHF3cZdXlBX/dYzLyQp5/ilYk+AiAkA3sGEz/j82Uu66MAgMXCwfB8RuxsA/jy2ikEilj+jQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCGQYCRA9TVsSAnZWagAAVq8P/ig/7WFPyupJe42rNbTA\nxBOeKgNT9y7r5CpfJlhFQPrXLaEhH3mAdOzgRFP3k2cbEqxugp6MqOLpHW+Y\nbp/6VpbvcqDa5Jd9grSrhs6+MiPr9AjqKp54DsI44f8prQoTwwc0xdnmW5Pf\nTQFNRyNC7z6w1Vgh5+V37QGjX6xrvf4JlSpo2vRdCAUJFy6seIFtlPQsioGz\nhgBAVK4BJt7vp08YiIbnh2jBAfi5pcmcFF9A8XfBpa29VVZHGslTnsHTl1M1\nDCUwlFlUMTHlWlyoiFlpzrOqiNtgaNj11rTdx4ChBKAG6ALIfboyv2K/8+HN\nnLbff7PNBOyCadDzB9qtSGedjpeGDyC46p7Ojv8dlnfU6qNU0v4Br+wCrdkp\nOQ1ZLoT4WpWjV57eHINcNOkOdVjwnf1FcrNxs+HLCQuvnyyF4tqqIXWMqYNt\nsSW1C2eUIAZsljflY+mn7G8uYzwMr2L/ATCnaoRsLUBuKusdOYjj2vP2txpm\n/muVAcxtLSBQXkRXF4OJbp80aH+X9GePjs+o2K2Cyc+8bHF7gULzY6RBKJ4M\nqpsFzLyPK0pnDQsYwPMXdvdg8tWAZZMNpkAz2rKTpdt/5COB7W14bc53C98M\nra9Qc6m5I13PsLMXkT1oS/+RNdeM/IeE1qeffMtECMpFuQ6lb38wngEgWvsW\nJsby\r\n=j/b4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.10"},"peerDependencies":{"react":"^16.13.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.11_1611162648172_0.19702945617184486","host":"s3://npm-registry-packages"}},"2.0.0-alpha.12":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.12","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.12","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"a7b55b59351910243ff46e836a0be245352f3152","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.12.tgz","fileCount":8,"integrity":"sha512-EWMCbFBJ2LUMdplpyHXCWElHmlma0JvJoc/NePv6/uVR7nApZOEClnuePjAsdZQUwewVazYRPUVltti07fU7uQ==","signatures":[{"sig":"MEQCIC7KGL4JaU5KtH62i9GWvMgJ6f47d8Oendff1Zef9cG3AiBFKJ5VSTmp6Bp68otYtM7SOt2EUnZUf5twrHp/tQwpEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCqoTCRA9TVsSAnZWagAAb1EQAJ7HVbh/IMOfx3A7pXun\no9c2atQN0qeqkGYen1P8gZXNNJbYf5kSVfVlBZphbYnAy5lT+/HfnUz5oMjD\nTHFOwjEt7igQeuX3ls6Li1SyPHG0MhZkcYzkKLzXfbmDEDxToza/G6dhH2xw\nuoPmFSWRTMuGMTJy4F+bIZai7JP0hTvHjTn/yEBUZtVznFDk1u7LtGzhz8rG\nwUGYCuUFJaJ5eYxb9pSHkX5yYEWwgUpghSVHVWTP0+xb3Ji5KfzMpO2r6M5V\nmzIId/nOyyIVeTyzN9mDfSLBs9QN6NsGM3OUOmsP+G3p3JZoZ0dclAC/ex66\ndPf0xyOvNnXlwdgEKdL0Ec0be60N2viQp77n01NyXZZ/BiR7euapd/+Fm/9K\nE1AqqmKkLX+/FQKiPwWbC2dUfE3ShYpORcjxJA7g9Fq8tmxMUVLRAX5ESwrp\nPgER5ZdbnbDfH/I0pk2YurD8DNhUFTm4FtTvBuE0Q2eRhw+3Rpz7UTVdvEju\ngjke0bYqYNqmAm+JtiRRGAwg8y8lq/hRE6UIEpCs2VP+oOtNgGHTSFMa/zZp\nJ9krlLE4XuqYkV0K0lDXiNoaUkYMCgDRMP5Sqqbw/0pWOonwY0cMvci8lw/E\nPEh/fkpXj9odpaToaFfYKUWY8If4N53VqilHqfsk5CXno2eN/4PzdLNejf2V\n/+ZT\r\n=VDh8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.8","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.10"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.12_1611311634953_0.1913181708576117","host":"s3://npm-registry-packages"}},"2.0.0-alpha.13":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.13","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.13","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"843d528178e016daac14ca9463044110aff87251","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.13.tgz","fileCount":8,"integrity":"sha512-abf2Id0t55h5kUErZcs5i9BDDnqlK9CT27bFktAxmwRJSCm++YVcc7FNgTAKMERIiZfQknr+m9xQYO0p/9dURA==","signatures":[{"sig":"MEQCICNqy9E2++6nW8SmPrQqA1CmETqw+vZGYPAKq+EMHMMXAiAPAxkIarzwkLkQC4XcoP1zS7DUw6lGlsUbjiGzrpocAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":78036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHAEkCRA9TVsSAnZWagAApkEP/iwcSoEsqF+dpiY9Mdng\n71tFzUdYUCI6PijaQDEZPlWZ9Amo/cha8AQcgIi8XtwrJ7lBY7YC/+MZ2hfn\ng0qaL7jc5tQnCZLnv+8i4HvPRRrfhkkVtrEIftNgTUisaqPvVxa0VBOJL+ab\n8bbIvZnFocCcDJBe9rFH2joYxdFdthHZh2pnRDRo/+h3QfJtz2NNkfrdjGmc\njAlMxZGOsd6dSzQXo+i/F7KPLCI/qPFSPviSjEOiDMQVkImmjXRG+oiwzZt6\nDQGeZWDkdmhZ71OUydC4BcocZ9K+RFcLTJyFpD7LyaIixk8FjZIoGnY3ROUn\nGMLOIHVGvjBRdIfoRA8ALmzxaqNsB/j90FFmQQZtVkWwnkoKceneGSzEQ9gq\nqC3oBefOg6+Mls8tuhwBGGLVdwKhdP5w5LSpS1of0L/nlO/aiOqufI6iAdBn\nu378+yaozMo5fmVtKfQ7e9RvXfJSKDjQV6tNel7thg9Yeeupjptz0SPlcTIm\nB8MoigxY17AKUQkU24icWkT/5jTm8aJZQFywGM0bEa0w6j+AC/R+no6tiN7L\nVY+wDBFGqnuCHDQDnqmDcNxITy61tPMfb+3zHPhuR+fn17pxgWQmRHm+dRt+\n7fCujD7JgIpwEsmee4O9B+s8TIOlM4jZ3eDSBznxLuklb99ll6n//RKStWtI\nF27k\r\n=UD3z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.10","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.11"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.13_1612448035936_0.8765291114130647","host":"s3://npm-registry-packages"}},"2.0.0-alpha.14":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.14","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.14","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"4e7f69698386c17e63603fc1e1d7023c501cdda9","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.14.tgz","fileCount":8,"integrity":"sha512-1BTqSYIGHbaSu3bWENsQCPKNvLqA65I7MD6FxynGlOyZbe/aRwxoGuSaw7R6NyDKsx166n7t4FpPrBpBPuxoXw==","signatures":[{"sig":"MEYCIQCAgTr+Q/eueCsc5r2I4tANLRqt9jRIxwm5yPmJySnaDAIhANtCXoTljOkj708WERnYGJv0+UMwjeed6QDoVHemaJYO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":78161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHA3gCRA9TVsSAnZWagAA6KMP/15NKd3fxoCfs34GfzQu\nffpRaybebl/kH1RlHGeEH7Y4qs0ATEt8sydvR9gRCRt2PzaPFA7t2/nmWU4g\nSRvCsm29D7aQ4PVgA/petSuqOrQFUlZjI6DgNXQXPqGhHwWYMbFq9jfORhIT\nIZTxivU9MnHuywl4BVyp4Ey0Geh4bHEPW7o1xB+AIw5hdaXXxHfQwKZWS8Ep\n/mTHZK7eTiZKtI8nvcVM7sfzY6un+gVkdo/Vop6bsx0rLRXEJMPKQ0snR4rm\nk3KLhW+Q0KIFSRVwo20E4Tno+H6AuV4tnirxvjnGKAwMQr34XmCiAUVefJzD\nEQZD5w8+voVEqc3L6wDsh3s3aOcZUIMVSJJzozckXGCMoOfqoBYtJ5FUtoKr\n6gomWHxUxzwG8uafTCV3ua8m0LY+QRala32kjjZs7jNhffG4Uq5D6KZOVQ18\nRrCbq4CyDksTaGf7LuLwvyRVLPD65cLJDW85uWVY6Ngqt0HKZxGW6v2mJCoR\ne/ncmN6fPfHZTEMUU9Mi0DuEnTtYMqs1CSmLGhoIpWmJRXA/Ompu6kmu9wCJ\nPz4Zw4LVd0aGmUlhBWShwiCl1VYCGpDX+4lr9gsPoHmQna6P6OmSfOXVjLgl\nMC1EOukybdElwVPeqNdh9wlHTPPqKtwNmjcoA0S/XQWfFvDcYi5WAljBefxU\nvx8Z\r\n=/Ynk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.10","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.12"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.14_1612451295999_0.11641321667024607","host":"s3://npm-registry-packages"}},"2.0.0-alpha.15":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.15","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.15","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"50f6382720b1301fe6fe1976cb9fe084e56760a9","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.15.tgz","fileCount":8,"integrity":"sha512-XMl6VIWWcCG/kWFzRDP+WgHJmCrnkvaTMvMFQp0zwd102cFIxp7HOMDNaLR9CaKieWgD1aD/V0D0eI9wTs7GYQ==","signatures":[{"sig":"MEUCIDVgBbhJnCWyc2cqH0RgVOaaWQkyv4QLydczvBICl3xNAiEAwSU1s8eTjILkHeFcpUVbJkVrE32DDwQQkI9Io/Y4fjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":78273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM3FeCRA9TVsSAnZWagAA3XwP/3AJWpYym0KSBpQU+Sp5\noVp/896VOH5esMRPdbereUjfPwKa6Q9oH0mxfiHpzWl9fexeLWroWyzy5/Jo\nTO0Z1XXOsPjYNg7i32yPd+0qnVlk6UFf4e5VZaQell1RdmcGyVmjrLwn4SaS\nSuKOlCZ07joP2s/L2kwh/bokOrT+TtHaZvBIU4EzTbN4Nu0Qu6YnIQKxPcFi\n/jA1B37K4059QKBPD3d6QkLo4sXztJ5c3HeBjoJLg6YbeQ9CHXfGuXR4K6fF\nHSxX4i4Se+fldZbC9AF2sTTk/nViYfgtOBq34uJ3Gchskp1tEXip1IMnJwwq\ngIQuKqxkhEnQaKSD6KubnGqOELBXg9Et6FN9Qdg+rUvwkqjVs3KwhG3f1120\nskH6+E7rmdxjaxrtsuNFtnF2+eAzFv7FtaB1TbtlXEXsjN9X0c/kUUPahDS6\nxbg0aRE5LBYuZiD4M4pehPulUkE/jfbKdEyMR4qH0iWplNRDReRFUFR2XbPw\nHEULvvypf8lKYXkDYzt2WiBhSfLhEJMY3UJe4mSNf5PoaQDq5SmVst2KXSor\nSfpKdzlGZ1aRqFPJ+62yPZ2KgWSHrjmRz9dc898P4aJpESNG2E39KpBPAQO4\nwcKh2uhmQJV3uqm3LyQVh8G57aZydifdGNxjvy7dnJ+oH8IhvsRucDDY3oXs\n3JGz\r\n=m3Tc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.10","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.12"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.15_1613984093829_0.9275296162419415","host":"s3://npm-registry-packages"}},"2.0.0-alpha.16":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.16","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.16","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"86b24f22611335bd5bc4df37a5c72dd07ac327b6","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.16.tgz","fileCount":8,"integrity":"sha512-xmnhJMSmcqlbkBb1N6wPwt94kVY/Cwzl8hP2VOGCaxTok2+yu2Am+MtUHokt4RbN/6VdgOI+CaD7wHxgzudptg==","signatures":[{"sig":"MEUCIHLvg0YKn9QVVmVvHjnPVFZF9UrFt2skh2JJg0E2003TAiEAwB8pcC/NpHnB0ACKnxL0eLvTSdxRhLTftE05IF0+Eqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":78503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPh55CRA9TVsSAnZWagAAcjsQAJUqUL50kttK9q77N+Ep\nPEGUP8AC+QVEupX6mzgWRNOLyznq+h46s6dm7Fq7qsIVrO0J4nXySCQxKZ6m\nB+Q7L+b7eahTz/SB0ug8ozdYmks0jsjLXaJy2WV/u5mdKTmtJ4fNhy9r7CVD\nOEFFn++la/Ev/6f41p5j6mATUyV5rySnyXlQ41YEnHprUDly7wJ9T1H15QLI\nNlNlwr2LZfalcz2tQtVPbtNLM8pm6XQLnvV0BqToV6sOxg9omYZiTkIVY3Fj\ndATLEBzDL1TMnScnh4hQ4fc5lWeJkjjdCcDcTwcodAFYBSbqrIEvv3CjNaBY\nBuI6ajmoPTlxPPMfeL9rYzDH5XTbnOgxs6HPecP6QY8QK6WIn+n5fhANGkEO\n++9n/mUNLwER5nzrxhulId03VmkRlKo6rTnOySd5ks45NJxMfRPJSvIiYuC/\nUE5Fb8R+4wQbpy6ELfLr9uSzf+SikH9TlDx+LHXNnDaG7oBDJop/gKWEHf47\nYo6LWxsqVC3wmPCheB7tAvF/Z4l3OTIC4wfRrLmzSCvXXSN0n+8JLQTIqbNV\npuplKzB0nbS3no2avBHxgMN/4aVQ9mWm84XxF9YifBFjBspMMYektrL9KYw1\nMa0dVmQDfdSc8xB/kYkhmDD2pr71uSEXnoN7DnoGRRcH8tEDAxL5iJrqgjiw\niKif\r\n=9erW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.11","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.20.2","dependencies":{"intersection-observer":"^0.7.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@bbc/psammead-headings":"^5.0.12"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.16_1614683769438_0.34065966381802837","host":"s3://npm-registry-packages"}},"2.0.0-alpha.17":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.17","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.17","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"8e399f6ac4a840a6984983d4f9f4054fb79706fe","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.17.tgz","fileCount":8,"integrity":"sha512-eri13q2DIu3K3FZtHdBSK2jnKqV5X2d1nVPC3pyyzOiiQMT407r1iZUf0o7CGEFqth+MjNGg5Z4BJdln0rkIcg==","signatures":[{"sig":"MEUCIDQdllM2OmueMhD9sdikMSEng+DyTyZi5L6oA5EkP3AIAiEAk6wQDlU2SSdAn7MGvkE9T2WBfFid1fmcRJ9Ig3svYYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":78698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSMHhCRA9TVsSAnZWagAAu04P/1ea6F1Wkm0PEHqzZjuJ\nKSQ0yK+96PQOk9X7jPeWmu+xF6knBb1SN9yIr+oesvs9kfyq/qVZHHJLoTEr\naZf3Bo/CyEII9GCLae7YuwQoOpxgxbcBjdVtiEzYVBPJIJLoARNgNvN8lz5+\nFdv9y2pXKhBqfVkIZG1iktFwe4RYCo2y9KYEbIuEWCdDSEwzY0LJBr98c2Yn\nRah2Woah+lzQ4FmhNp0YXudeA08rEy5SgK/R3WA8g09y11zSzVDnpoAYDbee\nPloKCIKWMYybpIQQzH5efRffrcjSYLcyq1TDCIexukpQexNQ1hhjGyqZwGhD\n6NF2mHbLjBnIZ+cvN9RsoS46epYFqdTm4iZJPT1mjMO3s33shlF/4IRNH0WM\n/3vZQyZhZzb32H5ZH5ekp865mecXVLLPPr2Y6vdGzAkkI87SV/r4EAtXRjtX\neicVo/TmG8ODeHOBpCobu5mUBgG8pQRMXofR/skFknx6PjxVAxr6gbYA98kp\nPgUwIgk8Ty69F64MTllajknY4H5Cak9YWD3dwkT54RzyfKeyqAlR7i3S+Mn4\nOVO/ZpJfNe3FP0FE5Ne4g3Zl7cKKhhCdZcieyWaJIMausvLbEt32m0ThH7HI\nixNyvTmfDw3XyKA0fAiBsxZNZZR3F9+4YbKAebCwjAXd8dhb9goERADlNvUf\nIBgP\r\n=EMZc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.11","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0","@bbc/psammead-headings":"^5.0.12"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.17_1615380960633_0.97670618282436","host":"s3://npm-registry-packages"}},"2.0.0-alpha.18":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.18","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.18","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"d965873e153b592c9bdb8545635ecc932f64743b","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.18.tgz","fileCount":8,"integrity":"sha512-RWep1Fduv85THGsDp82+B4uqBeKt9eFUounMgOyMfmtDUXCl94vPws/7/jYXwQFlOtOm3PLRc9elDCVjKwBx1Q==","signatures":[{"sig":"MEUCIQDBFg5yGsPbMs3a3jALiCO6+CS4EfE69C5+Y+PuphrLXQIgBJkvBviuJjEkWsnodVpxj4s2JFatbEYveGaQca1LHXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":78697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT4guCRA9TVsSAnZWagAAVOgQAIzYa4p7nu8uyB0wjTAF\nYmVghUwLBrB8ylxrEkM6jdUk8mN+RgTNcAy3KwKZeP3RE6vIJDH7YfugMK5D\nvf00tMqwXjKzmG17XxXQC+s85Kg7cEeEIYzdiJxkbWl/u9FYDdm8eRG65kWe\nYssOZsqgIRlzBr9/73GlQ+XvE0qZngvwEyqVyVSE2k2FkrbohdZYwb1LXKOV\nym/hopNRSA3t7Kw8hQHe7dh9iMZz0qSfL+rzFbhjt8X3zjNPnq3SwOvLhOSz\nk3NO7KfS3EG2qOgkI+Kgb/L6n4fgt2E2COODjeBdPC73BaN7lXhV7ThM8mf3\nQ2eFKnsQdcGeKQOuSCd8uipeAzCrOu+Vx/czyltAfg8zvDqoVLC5Ce+wUvu2\nhGnd2ksMP0l/TYA6s29Vu3wcZH1/zlHB+atHMfZYq8HGQaRNXqJGSWBblE+l\nk9vL4AueNsencz1wM+D3/EVE/7MTwqr0M8OnslCbKh6UOfz3flcMOKLcRgDv\ni0XKFNuHzV7ILm2nfz7mfaq+EsFg+C5W8Kq3JLtbaOswtPPIJZhnfrwRNOge\ngTkY7t8zH9mJ5nXPEtRKqQcARZAdksGfk90oK2H6kMuu6IzEYVIQmNRJ2f0/\n/TES+XQU+Ff+Jevhpe/GfyzeLiG+Qjm0CxcrnMjGr/mSV6sX37847xETpqIk\nva1E\r\n=Mer1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.11","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0","@bbc/psammead-headings":"5.0.16"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.18_1615824942500_0.9550964031180966","host":"s3://npm-registry-packages"}},"2.0.0-alpha.19":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.19","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.19","maintainers":[{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"2ec289cb25ff738e51c1be59c6823e1d922b1eb9","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.19.tgz","fileCount":8,"integrity":"sha512-v2tDvMgmfo3AoQC1TvGn1Quh86YXVgTjz/OdUIAKaEymGlMKOygWDueoXjMtZF9h151VtnWxM4wd4G6JeDUnHg==","signatures":[{"sig":"MEQCID6Xx4QrRP8cuavpwsCvK2JKrqIAL6AbV80kabBhH+aEAiAYtEx6kPcFS8ts/arSwcFH47MAy7uGZJ3ZBKAsnL9+zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr2CECRA9TVsSAnZWagAAV3gP/iRMCt7dzArFeHlj74lJ\nasN1HO9Xf6AS4KgVZGbzMBkQ9Z7rLMqfZWxJRDygd2lXUsCnxEDCVUT2XPoy\nBTBFHGwvfDtZFWtiqJ1AYSUfnLdiURv5Cjshk6ubtSnoV4mNobKISqMZuSiA\n0c4URW849/4kBq/GVOAcczfOt3uJnTeEG3get7kZG5Ji0FO+I3XNkI5T2rMn\ndepdyaLl9f8c6zfTmQ81MD2ii1E29SU6roUywr9qpFvDk70Pv12HpbUxVr0/\nZLkanUA065LbLYtgE5sKtCsC0IbQTdu9tmbgj7c9G5SQgiKQKfW6myLkgUHg\nxAd3A0CYZY7y4+P+ZuaVnRwAlx2D1UhLxnCHP+pXxbQCjCeXmqqLn05z1B4F\niuUuBZwvw+7Qdh2aKdPkZtE//BnsykL6Hi1voLfQT9nhIeSTaJHNF8SVV13i\n7ILcM993CV7beXNIJY3cKDCqOhF+wA6OF6M1pOCkAIiX2YtoOuW7UzYIKvIp\n5XHKffeo6vT9asPLCOSq0MPX179ty4zP2m5zbJ5iCZDV8PNmnUOgj0rl41MO\nQWM95jsBH9+y8ItYgsv77jBqWPV9EdcnOJdkx1uvEHKi8fRqg2y+mjT20dnv\niNkGmZgD0iCh+xEHNfZGv60ZKlH5xPjLnWCBvjxHgZBMB/S74KEPkdVMRamD\nFKz4\r\n=aTUW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.12","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.17"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.19_1622106244151_0.012673803632992087","host":"s3://npm-registry-packages"}},"2.0.0-alpha.20":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.20","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.20","maintainers":[{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"83fce9343791174b627aaed22d4569db3253d9f9","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.20.tgz","fileCount":8,"integrity":"sha512-LPe0Fu1jJSwUV8/hvoLTt1BEpfbWBhd8XUO2lezbzNetme1AxbPnTxJaQLswE4U4bnnaqcRaWKEdbuWfOqh33Q==","signatures":[{"sig":"MEYCIQCjSeszglqm7bF//4U6wzs+m8gsjzsEQHaeEpiE207d0QIhAL4tBrvUlIhYvG6JXh7lgp0lG7NtuAHbS43fJyhhAyDU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP1F3CRA9TVsSAnZWagAA5+UQAJwat6zAbyNi6VWqTSnF\nVlxoBlbbfYHB4/3P/cqCqQtyO7Lw9UlnZR3tM3KrlNoXjAzyeZQb/WBBP/5g\n4Nzd6zDnWZd8kMCTOZqKtqM398XsC/jUNi9LV9MOP3ODilsj+J5L2UGF0Fzc\nGNFc6bgF66joUWmJEuqRExHl768561wecaA+sDuzvQA3IcUw0VhwzVSWkKqg\n7KpzTQNPGa68I2mUKl8Ocwb4QYtFoqxv50Rmgvjg7bOf4m+2/v6seRM0kiDH\nevRP/M0CD2+J+TAxt9mox2/vrKWatBJ+7k6N6JvqxlRqrwjSmwIGxjdMHnRz\npKw3thLN2udYEO8mAo3B/X04xa8dLxyEBPT0IRHMbQ9woWlL34IfZ3L8O6Mm\nFcIIVKjr/5eh+DwxtZyYQBFHHbe1rBNxj6v4KPjrWd/RstMUFmJRiEO11Ttm\nPKDdWiw01WBuqQ9/QjUoXnZ+pINdYl0qIiSXtixFLWb+jInUKEkRMDq04j45\n8+1TSu+iq5983TMYm6YGYxJFz7RmhxOGKDuSa/zzQP/RTdO+gCUOH7maAWn0\nI5splWp2CBdcs2vYX4rndVhnWD0sPzKht0Cbu1vfuOA0JD++CPTCxRs6KZj8\nH3Z2yRVCpO05d/jQ6/iDPTBXxXqxL2Ejb5rF699gShcuPePJbm4fSD7dIGyp\nXoDu\r\n=jGu/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.19"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.20_1631539575705_0.8446782177138124","host":"s3://npm-registry-packages"}},"2.0.0-alpha.21":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.21","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.21","maintainers":[{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"1e530d407639554ae32dd9b45ac54295050bb65c","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.21.tgz","fileCount":8,"integrity":"sha512-r30kcVsCNuBg1LsRGxU9qDKUjdkSr/f5iGHqDmLFHfVGDafZNpTE7ZjYcWlzirR6vxOWYlExgKlZSSVxeLQdxg==","signatures":[{"sig":"MEUCIGiXy1CjJv6deA1m+vqyw9MywaiQkpynwuVu3vrTkQiLAiEAhFufb9jWtjZTH+Shhw/dZ7vwl6HSU8dpBkno0+7haCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQge9CRA9TVsSAnZWagAANSwQAIfbgMuySXuYUjsGKhw2\nsKUCCtld5vzEoN1TdMQKARIp74/yJki0/8o7Ii1JxDk0YTrIk5552WFLV5Gx\nGSMfmTGjH5CuMnsftriQUi8UfZNgB7ERGqwEOHLcTbxxlcHNcUBgtMvaGxq0\nVQ/T/YFkqf3Z+gWvOw2rDCzxLgMZSfsuloQh4ai5wPR3X8XPduaL3C0V9Xxu\nh2LYfmcM94pQ7UaEhsdRsAvFd3MRCPHqScJ2qbqYbLjlUWw0XugJcFQ1ykTj\neNdxEW5RnhPV8V2z3rJCP2hEd2adRJ/bH40GlF45sCyeWczCCr4rqwPzqbgg\nuUkErnFs6bRrSPQ/AGYM3hIkIaYTdpVmwXAx+qGBcghgHVlQsXBkYNg/X2RH\nT4NY9tqfSKGzXkf3OLUryYm2sGGTrupf/DQYGH1eTsKN+vH+X2u4nZpoYPaO\ny3INfuxw4UZ2EfLL5v3XDrjGk58n2n9ZKigP2ifhRghn7o1aZOijWcPZ/XDI\nxn0eGOs9ix+Yze4sDi4y4WRg8p0vz4Jeu6Vv1E/hjO+c/qTyYalksgGVSsi4\nI+vnrTtmKUI1JcvHZTYKw7j4wBq/SBAkfL7sufjyFs2/DDM/xbFbezQ7KEPS\nTiuuNqR8WPYLtOufdywdAxf5SY3ZQxuSsUwQN75ANBXWPxaE2SByCtuqBrix\niaPO\r\n=EzRx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.20"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.21_1631717309050_0.3637142179170081","host":"s3://npm-registry-packages"}},"2.0.0-alpha.22":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.22","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.22","maintainers":[{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"342b6b3fe172d4d52abd260917125fce92820d6d","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.22.tgz","fileCount":8,"integrity":"sha512-CQeVL84Tm//JfKIMzKOPsN0vdwyxa5N8QIjfM5dH53FHRpthnUMx/oazJEZZeF1O8WK+AzaI7Eq+eJDQl930Zw==","signatures":[{"sig":"MEQCIFLS442VoK7HCN61Pn4XpMIS95z/PRsIPjYc6dpBKqMqAiAG9BvKSrT9jQY/zbv7D0rJCltyaCkrilDJ3pbOafiqDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ106CRA9TVsSAnZWagAA24wP/3uRbStZv8IeqpRrVrdE\nil9Fz4ZHo1lgZDBOBVsGHV6gglbefsSU8w7P874SNdMiPJcU2a0XAnaTVUSX\nmupmxDime9JXIZMm5W2Ei6X2QzBXkiKIApJjbJpqny2O2Z5GDN3E4NjwRRfz\nPGIZjjdPaX1rT+RQXe2Rdh05XBQ0uqkP+Q+MjC932XxjLlADSne/Yt2WybGl\ntfx2NFDxcVeYWIllOeAWz+pmpIRnwrHc6ztWIWxekz8l5xeUZY4gYF0InZGI\nsDaltFnk+gtQ9038+oJs6aRkxGwi2B0b/QCK1dEQmgXiUfwRiWd5r7my1S/Y\n5hUAJRqmGISkDXfr/XugmlAcs8qU5331l3urWSxV9x8edUl9UzMfarfBm38b\nNr9Zrzz2Fe3n0W5eNOPtyQEuRRiPQfV0CjyOMPmL7Vt212qQMow9O/eSRkaC\nUARpU+qKvi5+PhQr1sXW9QDjg9u7ELKYc+AkGemmYHWdwOE4SEuWYK7eP7ZS\nADhH0a9xr+8yppLqB1znwUXG178ajoA3htxKDAogj024p7NOtYn/BkHUadOG\nenWDuHaJfQgQ2SjN/VrlI78iqlbKOAqjxxjHdteh4etyPR3eRMy0ZMJ2bDqo\n1y52kxaxUEQFKE0lk7E0epP3inoQRGSoyx+fqLZ0E8Boji2xrWjshA3GfH5H\nPNqi\r\n=NbMa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.21"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.22_1631804730721_0.6084140471193447","host":"s3://npm-registry-packages"}},"2.0.0-alpha.23":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.23","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.23","maintainers":[{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"a63eff879a77589aabbbe11f1a3a1dc67954c532","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.23.tgz","fileCount":8,"integrity":"sha512-OrjxBXoU5raEJC8v8QCuge3dJJmjKhSBx7fRssfEjlM7moq3p5N3wCzO9zZ2Lsuv2zrHTNX4l4T8KWrUUkL7jw==","signatures":[{"sig":"MEQCIGJfZX28I/JLCtS16pTm0G2FW+iouWBq60mNB1Y1d+jBAiB4hBJwFzECNLAZViFHffZdAvtlivqekxUbEhieyr43/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ3lFCRA9TVsSAnZWagAAe0IP/RyKXQ2X5kHTvFupOgTC\nGnntGZUf/4upveKqvQ1aUHkrgne/FCsg5e+ScGmCVXdKP/zxb9lpLBwL80NJ\nSoLMhxPZNxyjpBQ0QhbjfEgocCHMZbVVfgt7WyiuHVjskJDsa7FkE/rSsTMc\nqgZuH6ObjnjgvxIicjqnwtSOoy5rY6+GveiCP+YLMhkHoW+3tc1PnHrRv4Is\nWAWefum+j4cO4WxNcuDvgCXiYIG5R6t5kOiABdRWrT9XExh9ac0ljkmFln0f\naQ1gNpfTDTRQdPxfviwFiswbEcTGfzghK6zCfMKwRO6xEDtTsDvZ0Rq3j2PX\n2DaK6z1Wo38JtuewH3/r6fldhvmNhyW8gRSdfpkKF57tklmGBK/+kCjI/LEV\nF9NrJ0M4gEsevNjdJppuwpVIstHwhJRFBsDj5nx0/2Wt8ChkfX4CqmK5tdGm\nQstP54crs1VqPydIZOEystGK81BdEOWNmgpN4ws0EX2vzYxyqcUi6LaN/eIB\nuM1E1QYs17y2YfTkxhUcGVO1mDkUzayqq9LfmNeabM1ioMytSikZm03hIdUP\nTrOWTizE8mZ5M7VpijT3EtNEB9KGuwkWvvjWDkLYUQPeZEwjOS/Qwbobd3QB\nfbihiKBRj609ir1MDhA2Qe+6JV0bodGrDXCWvc7bbPqLDxhvAqVmjRxc5sfm\na0U/\r\n=1knj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.22"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.23_1631811909300_0.7143780463356044","host":"s3://npm-registry-packages"}},"2.0.0-alpha.24":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.24","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.24","maintainers":[{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"a3ae23b497308d0a7aeb130d57f21b424f261688","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.24.tgz","fileCount":8,"integrity":"sha512-sMdpG0Wblzb5YPqjk4J/XW2YoAeQ6JRTksVCVopsfk/W84hYmKWFTve4QjWMD0LoCj7uHOQ1QpzkIc/FrqelcQ==","signatures":[{"sig":"MEUCIEjoTyClF4XTJdHLv275YIWMfkmpUqnKHcU7wdyf883RAiEA8qwUvUHTMniRbXe3mbSiLtdYKXUnpD1OdrGQObDr7G8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79808},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.22"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.24_1632129984977_0.9648732356857712","host":"s3://npm-registry-packages"}},"2.0.0-alpha.25":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.25","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.25","maintainers":[{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"66c9758e4b1cec9579470cfa67c147d8425b40a6","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.25.tgz","fileCount":8,"integrity":"sha512-jkBYHQ1EAHaXx5Maz5KyECRGISyv0PZCqXk+4NNMKbFC8MdwSG9m3+hR6/PBPTazuEPZjx0BRFUz4ym2zLM9oA==","signatures":[{"sig":"MEYCIQDh3K8DC8IRnYR98sH9nsoB4xaBVtFPVDhwWFK59Hz/QgIhANkPQu04tO53gO0S6KPxZBfPxO56y1yZwxkk6HVGjEwH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79900},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.23"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.25_1632227997860_0.5716054355658953","host":"s3://npm-registry-packages"}},"2.0.0-alpha.26":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.26","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.26","maintainers":[{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"32df3bc5cdc69c9d34c26b750c4e4d755666485d","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.26.tgz","fileCount":8,"integrity":"sha512-5N615Ens+yJ3a3ThBleidpqfBZ0/kBJTZ8mz5LmKo4AdXKYNVSVUgkG4bhQs5ykz+gSfMn7a3xsE7IOf3+Xwtw==","signatures":[{"sig":"MEUCIACz7iS+GQZJYfvmyi0IypdbdmZy6bdrOB7cfejdu2UQAiEAglchL/lho95pI13n/X498LL4u3Yl2apTUUg4i2NJcAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79995},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.24"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.26_1632300750148_0.6242673716290281","host":"s3://npm-registry-packages"}},"2.0.0-alpha.27":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.27","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.27","maintainers":[{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"7a1eb0b962f2d1d2b7499edd8518db8a1014cc96","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.27.tgz","fileCount":8,"integrity":"sha512-Jq5ZzbFMPObhgFWbN360Ow1LteqaBwdZa4rEGhRlJf8Eu6SfdyPVgYmXVfzoXhi2c5HsvSDx+ywrVN2nIVtifQ==","signatures":[{"sig":"MEQCIHMXkTFhy2toe9TAfy98T4qL6cYh+9RaVRapDU/bMQwhAiB7s2Vwdg9ybsj7T0quDJ4ulQhVVrKK5Tpql4tkPEodhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80095},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.25"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.27_1632312914424_0.6399226841183046","host":"s3://npm-registry-packages"}},"2.0.0-alpha.28":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.28","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.28","maintainers":[{"name":"news-vj-bot","email":"bbc.news.visual.journalism@gmail.com"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"ccec57b3838940a79814605b2b3dda78f0115ca9","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.28.tgz","fileCount":8,"integrity":"sha512-4nz0jUiO8nQJd018QEaQsz++/XC1gOMkoWZ0pOUgr6/1IDA0pW6SD3A85+uuAv7zJnIQcrCetygiDZmMCUtusQ==","signatures":[{"sig":"MEUCIQC3oQyQmQp6zrOPlms0x2JbEYftbfIpPbm2cKBS10zKCAIgRzl7tL91A2qky07gyhVcmGEbnDMuL33Ub8X+5j2VL7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80187},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.26"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.28_1633010989079_0.22537816675243993","host":"s3://npm-registry-packages"}},"2.0.0-alpha.29":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.29","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.29","maintainers":[{"name":"news-vj-bot","email":"bbc.news.visual.journalism@gmail.com"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"icat-readonly","email":"icatteam@bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"2f86e74294df7c9148695d87cb8494d4ebb9a932","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.29.tgz","fileCount":8,"integrity":"sha512-3GqqLGBnOBsfKPRwA9X1ANckbmbSHpzTnD4KKVr368f2Km6xcgLvq0pUlPHI+rssneKyLX4G2LOzKRafzQNLSg==","signatures":[{"sig":"MEQCICHIlEuCDxkv9j3rz288vwyXY/YNYyU7bpewiZ0/CNn4AiBJjHot7KhGH5H+R23MHuwP+RW8Xigxf7f310FV7RR9oQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80303},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.27"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.29_1633531646539_0.5168732559528166","host":"s3://npm-registry-packages"}},"2.0.0-alpha.30":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.30","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.30","maintainers":[{"name":"news-vj-bot","email":"bbc.news.visual.journalism@gmail.com"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"e8397086b3c462dd6ccd50360f8eb06533520efd","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.30.tgz","fileCount":8,"integrity":"sha512-YPe+5Wy0HW0vsTCE/sfeBAgiOLzy03X0ZgoZxsTOG4Jp16jUUUZ0Ou5CBOkKjltM4Cr9bD6QIYXHAnFxYJmgSQ==","signatures":[{"sig":"MEUCIBjx/DVW9QCRiwsZy3zt9t+kgl8NGeXS0lmPGU/7zsiFAiEA0eZudF8XQov7DYLifpaUKb+2J20laBzyXm+ljWLJHUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1t1+CRA9TVsSAnZWagAAlIkP/3LG7/QPQ96ysnME/nsv\nG2sglT1Z1tSrKdMJd4kAV2+hFodBDP5qwL9lxoMKQgJQsHMKA8/GsJjr+cpd\nc8WEsSWkD3fy3CQtBOBTKpBqyFXMw/kJLAx8YupOWCXViAmFe21elMiFNhSh\nFXSJjxw1f2bZxbK7s2Fl60qCTDJl2RgWgPQZiY/wcFDAqgJrIDb1H+eAiBB5\n6dne8WSfsYqHureXPTR5wW1naaDkbFLKnxYjGVjD3A9uCmTMMG1VU0BdYExa\ne14xtrDPuPSvieNZIMyk/mbwvON7KAucgVDiOWW5sqdty2U3w6VgPA59Z2Az\nL/DESUVIolpEES10WB3dpHlOrq8Zg/s5t5qDUIO2QU7wS8g/+RUgrpg5VrGJ\na519GKIkvcAUXkmlnteuasw88Fk4lBSqf610b6cHWlFYSwGqWF7lYQ11k+of\nW4TgiHDavMtnl2ZxTw1nxWR7S3B7SKoPvPp5E0d+pywdAzoiQgJ3rlHey7DE\nkZAG7RY85V9kB/xm193D5vy97X278I3JuofFl2u1J+3dIU/3f2oXToUvfd14\nHksplDOomBXdsWXf3HeiwvR/N3v6m+aEAhV1+N+jaCRB8eNmqMm1XLBGboki\ni/oCU3BFoWsYyf/svpXrSTK4c0I5ush4TeLWI4xmAdk5zI7gZY4P2CeFJw1G\ngHLw\r\n=pNQU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.15","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.8","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"stableVersion":"2.0.0-alpha.29","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.28"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.30_1641471357984_0.056639726346004116","host":"s3://npm-registry-packages"}},"2.0.0-alpha.31":{"name":"@bbc/psammead-content-anchor","version":"2.0.0-alpha.31","author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","_id":"@bbc/psammead-content-anchor@2.0.0-alpha.31","maintainers":[{"name":"news-vj-bot","email":"bbc.news.visual.journalism@gmail.com"},{"name":"silver-jenkins","email":"D&ESilver.support@bbc.co.uk"},{"name":"bbc-web-core","email":"devx@bbc.co.uk"},{"name":"ibl-jenkins","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayer-web-jenkins","email":"responsive-iplayer@lists.forge.bbc.co.uk"},{"name":"sport-web-jenkins","email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk"},{"name":"bbcconnections","email":"connections.techsupport@bbc.co.uk"},{"name":"bbc-gnl-ci","email":"WWGNDevelopmentTeam@bbc.com"},{"name":"bbc-morph","email":"morph-devops@bbc.co.uk"},{"name":"itv-ci-machine","email":"ConnectedTV-Development@lists.forge.bbc.co.uk"},{"name":"audienceplatformdev","email":"AudiencePlatformDev@bbc.co.uk"},{"name":"bbc-archivesearch-development-team","email":"ArchiveSearchDevelopmentTeam@bbc.co.uk"},{"name":"sounds-web-jenkins","email":"sounds-web-jenkins@bbc.co.uk"},{"name":"rmsdev","email":"radio-and-music-services-developer@lists.forge.bbc.co.uk"},{"name":"bbc-voice-pipeline","email":"voice-development-team@lists.forge.bbc.co.uk"},{"name":"weather-jenkins","email":"DigitalWeatherDevs@bbc.co.uk"},{"name":"newslabs-jenkins","email":"newslabs-development@lists.forge.bbc.co.uk"},{"name":"api-management-jenkins","email":"api@bbc.co.uk"},{"name":"mdtbuild","email":"ise.jenkins@bbc.co.uk"},{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},{"name":"cps-support","email":"CPSSupport2@bbc.co.uk"},{"name":"bbc-cd-jenkins","email":"ContentDiscoveryDevs@bbc.co.uk"},{"name":"locator-deploy","email":"D+ELocationServicesProjectTeam@bbc.co.uk"},{"name":"bbc-isite","email":"isite-team@bbc.co.uk"},{"name":"travel-jenkins","email":"bbclocaljenkins@gmail.com"},{"name":"participation-jenkins","email":"audienceparticipationdevs@bbc.co.uk"},{"name":"bbc-news-jenkins","email":"DigitalNewsIDTAdmin@bbc.co.uk"},{"name":"bbcrd","email":"irfs@bbc.co.uk"},{"name":"ibl","email":"ibl-team@lists.forge.bbc.co.uk"},{"name":"iplayerradio-aws","email":"iplayerradio-aws-development@lists.forge.bbc.co.uk"},{"name":"media-playout-jenkins","email":"empsupport@bbc.co.uk"},{"name":"partner-platform-jenkins","email":"partnerplatformsupport@bbc.co.uk"},{"name":"bbc-admin","email":"npm-admins@lists.forge.bbc.co.uk"},{"name":"gel-jenkins","email":"gel-dev-account@lists.forge.bbc.co.uk"},{"name":"pcs-amp-jenkins","email":"pcs-amp-development@lists.forge.bbc.co.uk"},{"name":"education-jenkins","email":"bitesize-engineering@lists.forge.bbc.co.uk"},{"name":"insyn-jenkins","email":"D&EPlatformCDSSyndicationCore@bbc.co.uk"},{"name":"kite-jenkins","email":"kite-dev@lists.forge.bbc.co.uk"},{"name":"bbcrd-artifactory","email":"artifactory@rd.bbc.co.uk"},{"name":"iplayer-pc-downloads-pipeline-bot","email":"DLiPlayDownldsTm@bbc.co.uk"}],"homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","bugs":{"url":"https://github.com/bbc/psammead/issues"},"dist":{"shasum":"ef7dd08bfd5ca1d300a17e1405821cc54608fd51","tarball":"https://registry.npmjs.org/@bbc/psammead-content-anchor/-/psammead-content-anchor-2.0.0-alpha.31.tgz","fileCount":8,"integrity":"sha512-C20LO4/b8rUAbJn/9EFFZDrs9fdTGKND5Kb/FTGI4ti/CWb3i7dr730hSnnRxTkQI/4Fx46+Rsn28PGw8Moa4g==","signatures":[{"sig":"MEUCIQDRSd0Zjo0MwDH9J6aiTzfOmx/JXJ/4vvcB6DYuMOdoEwIgNx4bBhxNaS8bZiIXgbmhMNJ6fMxq1mc/2+c24VQWSuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQvrpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7hBAAo51xOGZ5cuioYz5bF6LVr/q156x0t3hYlW+GK3SSzVzHaQpF\r\nGTWFEgujQSGLWWduiuV06ZD+r97PH9whE+z4UQlrxtAePSVXJ1Udw2FzG+vM\r\n73lUw+BjnXdP0XGSFbRT1qA6KyX2Awz/LgU5AHLXUaj+iYq6LUQlJKibXxTz\r\n7I4+KpqCnfDBQ0CD66/D+tXa4cgpgwAJa6u7+X7QBqJzjMOCM/FxjIbxP7r3\r\nb8yBHaJeiosZEySb4EPu3wwOmd3joPAmwBSCC79ycdBjzsY+SG1EQ/BhyYW0\r\njqEZ0qjwuhxjkBAVXZfSCEpFZjf1y5Vynh8HL9iTFp5KbrPuT9MYWYYPzZvB\r\nSKotzOvLbeZMZnNfqfR/oMm34Vtzix/tPRk9QGxhj+Fc6EgnXF22/w0F1r8p\r\nUAQ98Gcp7gY1bG+DpivVO9d7Rowfi2pqC5s5npqXONR/8InCcjb7z0+vMh67\r\nYTDVnxqbmdiAYVfkzFJlG1QIsBIgQ1B0JMgEgND1tvmTJHMuqESFEeTPZpwz\r\nlcS2GcSQhiY6C+ZIoAzUfsUX5T/DmmtzOC8yIlgj4rsCGC+0JLhMIlbM+08Y\r\nJEgR6Tu7ax204fDBQ2S4ImvlbFyMtMFT3wQPnjCPH/6Rskd8n0/xq4L1r/7U\r\n3u3z6mpEgu3NKup+BXVZOdzpv7HpIxIDMio=\r\n=EMR+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"esm/index.js","readme":"# ⛔️ This is an alpha component ⛔️\n\nThis component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.\n\n# psammead-content-anchor - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-content-anchor%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-content-anchor)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-content-anchor&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/components-ContentAnchor--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-content-anchor.svg)](https://www.npmjs.com/package/@bbc/psammead-content-anchor) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)\n\n## Description\n\n`ContentAnchor` is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.\n\n> Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - [CSS Working Group](https://drafts.csswg.org/css-scroll-anchoring/#intro*)\n\nSuch content can be wrapped with `ContentAnchor` to prevent the page from jumping around.\n\n⚠️ Side-effects: This component enables [scroll-anchoring](https://drafts.csswg.org/css-scroll-anchoring/) by adding `overflow-anchor: auto` style to the `body` tag. We recommend you don't override this style and that you also don't explicitly set `overflow-anchor: none` on any parent elements of `ContentAnchor`. If you do then the user may experience content shifting.\n\n## How it works\n\n`ContentAnchor` will never resize when in view even if the child content resizes. `ContentAnchor` content is allowed to resize when it is outside of the viewport. If the `ContentAnchor` component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called [scroll anchoring](https://drafts.csswg.org/css-scroll-anchoring/) and can be achieved by setting `overflow-anchor: auto` on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an [opt-out for developers](https://www.chromestatus.com/feature/5700102471548928) and is implemented in `ContentAnchor` using javascript for browsers that do not have support for `overflow-anchor`.\n\n## Installation\n\n`npm install @bbc/psammead-content-anchor --save`\n\n## Props\n\n| Argument | Type | Required | Default | Example |\n| ------------- | ------------- | -------- | ------- | --------------- |\n| children | node | true | | |\n| initialHeight | String/Number | false | 'auto' | 400 |\n| initialWidth | String/Number | false | 'auto' | 400 |\n\n**Note** - `children` does not support passing in a React `Fragment` wrapping several children. Should be e.g. a div.\n\n## Usage\n\n```jsx\nimport ContentAnchor from '@bbc/psammead-content-anchor';\n\n\n \n\n```\n\n### When to use this component\n\nWhen you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.\n\n### When not to use this component\n\nWhen you are absolutely sure that the child content will never resize.\n\n### Accessibility notes\n\n\n\n### Roadmap\n\n\n\n## Contributing\n\nPsammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).\n\n### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)\n\nWe welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.\n\n### License\n\nPsammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).\n","_npmUser":{"name":"bbc-online","email":"PsammeadMaintainers@bbc.co.uk"},"repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"_npmVersion":"6.14.16","description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","directories":{},"sideEffects":false,"_nodeVersion":"12.22.10","dependencies":{"intersection-observer":"^0.12.0","@juggle/resize-observer":"^2.4.0"},"publishConfig":{"tag":"alpha"},"stableVersion":"2.0.0-alpha.29","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.2","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0","@bbc/psammead-headings":"5.0.29"},"peerDependencies":{"react":">=16.9.0","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/psammead-content-anchor_2.0.0-alpha.31_1648556777405_0.7003803533727373","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-01-30T10:43:37.716Z","modified":"2026-04-16T10:49:08.616Z","1.0.0-alpha.1":"2020-01-30T10:43:38.068Z","1.0.0-alpha.2":"2020-02-07T16:04:32.684Z","1.0.0-alpha.3":"2020-02-18T11:33:05.382Z","1.0.0-alpha.4":"2020-03-30T13:34:03.077Z","1.0.0-alpha.5":"2020-04-20T13:21:10.945Z","1.0.0-alpha.6":"2020-05-06T12:50:26.204Z","1.0.0-alpha.7":"2020-05-12T17:13:38.627Z","1.0.0-alpha.8":"2020-07-14T20:54:47.230Z","1.0.0-alpha.9":"2020-07-23T11:16:27.818Z","1.0.0-alpha.10":"2020-08-28T13:29:26.239Z","1.0.0-alpha.11":"2020-08-28T15:24:58.799Z","1.0.0-alpha.12":"2020-09-29T10:24:27.448Z","1.0.0-alpha.13":"2020-10-02T12:49:32.351Z","1.0.0-alpha.14":"2020-10-05T16:12:34.142Z","1.0.0-alpha.15":"2020-10-13T13:33:36.971Z","2.0.0-alpha.0":"2020-10-15T13:17:09.097Z","2.0.0-alpha.1":"2020-10-16T11:31:18.388Z","2.0.0-alpha.2":"2020-10-19T12:16:39.791Z","2.0.0-alpha.3":"2020-10-21T21:49:36.126Z","2.0.0-alpha.4":"2020-11-24T10:58:29.723Z","2.0.0-alpha.5":"2020-11-26T10:06:30.094Z","2.0.0-alpha.6":"2020-12-01T16:07:09.651Z","2.0.0-alpha.7":"2021-01-07T13:55:55.891Z","2.0.0-alpha.8":"2021-01-15T10:19:19.731Z","2.0.0-alpha.9":"2021-01-15T13:11:21.421Z","2.0.0-alpha.10":"2021-01-20T14:58:34.618Z","2.0.0-alpha.11":"2021-01-20T17:10:48.282Z","2.0.0-alpha.12":"2021-01-22T10:33:55.073Z","2.0.0-alpha.13":"2021-02-04T14:13:56.074Z","2.0.0-alpha.14":"2021-02-04T15:08:16.122Z","2.0.0-alpha.15":"2021-02-22T08:54:54.043Z","2.0.0-alpha.16":"2021-03-02T11:16:09.584Z","2.0.0-alpha.17":"2021-03-10T12:56:00.766Z","2.0.0-alpha.18":"2021-03-15T16:15:42.707Z","2.0.0-alpha.19":"2021-05-27T09:04:04.342Z","2.0.0-alpha.20":"2021-09-13T13:26:15.873Z","2.0.0-alpha.21":"2021-09-15T14:48:29.216Z","2.0.0-alpha.22":"2021-09-16T15:05:30.900Z","2.0.0-alpha.23":"2021-09-16T17:05:09.419Z","2.0.0-alpha.24":"2021-09-20T09:26:25.152Z","2.0.0-alpha.25":"2021-09-21T12:39:58.219Z","2.0.0-alpha.26":"2021-09-22T08:52:30.306Z","2.0.0-alpha.27":"2021-09-22T12:15:14.578Z","2.0.0-alpha.28":"2021-09-30T14:09:51.042Z","2.0.0-alpha.29":"2021-10-06T14:47:26.686Z","2.0.0-alpha.30":"2022-01-06T12:15:58.217Z","2.0.0-alpha.31":"2022-03-29T12:26:17.543Z"},"bugs":{"url":"https://github.com/bbc/psammead/issues"},"author":{"name":"Psammead Maintainers","email":"PsammeadMaintainers@bbc.co.uk"},"license":"Apache-2.0","homepage":"https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-content-anchor/README.md","repository":{"url":"https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-content-anchor","type":"git"},"description":"A component used to mitigate the jarring user experience of the page moving while the user is in the middle of consuming content","maintainers":[{"email":"D&ESilver.support@bbc.co.uk","name":"silver-jenkins"},{"email":"devx@bbc.co.uk","name":"bbc-web-core"},{"email":"iplayerwebdevelopers@bbc.co.uk","name":"iplayer-web-jenkins"},{"email":"sport-web-jenkins-caretakers@lists.forge.bbc.co.uk","name":"sport-web-jenkins"},{"email":"WWGNDevelopmentTeam@bbc.com","name":"bbc-gnl-ci"},{"email":"ConnectedTV-Development@lists.forge.bbc.co.uk","name":"itv-ci-machine"},{"email":"AudiencePlatformDev@bbc.co.uk","name":"audienceplatformdev"},{"email":"ArchiveSearchDevelopmentTeam@bbc.co.uk","name":"bbc-archivesearch-development-team"},{"email":"SoundsWebTooling@bbc.co.uk","name":"sounds-web-jenkins"},{"email":"radio-and-music-services-developer@lists.forge.bbc.co.uk","name":"rmsdev"},{"email":"voice-development-team@lists.forge.bbc.co.uk","name":"bbc-voice-pipeline"},{"email":"DigitalWeatherDevs@bbc.co.uk","name":"weather-jenkins"},{"email":"newslabs-development@lists.forge.bbc.co.uk","name":"newslabs-jenkins"},{"email":"api@bbc.co.uk","name":"api-management-jenkins"},{"email":"ise.jenkins@bbc.co.uk","name":"mdtbuild"},{"email":"CPSSupport2@bbc.co.uk","name":"cps-support"},{"email":"ContentDiscoveryDevs@bbc.co.uk","name":"bbc-cd-jenkins"},{"email":"isite-team@bbc.co.uk","name":"bbc-isite"},{"email":"audienceparticipationdevs@bbc.co.uk","name":"participation-jenkins"},{"email":"DigitalNewsIDTAdmin@bbc.co.uk","name":"bbc-news-jenkins"},{"email":"irfs@bbc.co.uk","name":"bbcrd"},{"email":"IBLMachineUser@bbc.co.uk","name":"ibl"},{"email":"iplayerradio-aws-development@lists.forge.bbc.co.uk","name":"iplayerradio-aws"},{"email":"empsupport@bbc.co.uk","name":"media-playout-jenkins"},{"email":"npm-admins@lists.forge.bbc.co.uk","name":"bbc-admin"},{"email":"ampsupport@bbc.co.uk","name":"pcs-amp-jenkins"},{"email":"D&EPlatformCDSSyndicationCore@bbc.co.uk","name":"insyn-jenkins"},{"email":"jim.levett.ext@bbc.co.uk","name":"kite-jenkins"},{"email":"artifactory@rd.bbc.co.uk","name":"bbcrd-artifactory"},{"email":"DLiPlayDownldsTm@bbc.co.uk","name":"iplayer-pc-downloads-pipeline-bot"}],"readme":"","readmeFilename":""}