diff --git a/README.md b/README.md index ce66b67..6c9c8f5 100755 --- a/README.md +++ b/README.md @@ -139,18 +139,23 @@ To highlight the current target element, use the `data-swup-scroll-target` attri ### Offset -Offset to substract from the final scroll position, to account for fixed headers. Can be either a number or a function that returns the offset. +Offset to substract from the final scroll position, to account for fixed headers. Can be either a +static number or a function that returns a value based on the scroll target. To apply differing +offsets for vertical and horizontal scrolling, return an object with `top` and `left` properties. ```javascript { // Number: fixed offset in px offset: 30, + // Object: fixed vertical and horizontal offset in px + offset: { top: 30, left: 10 }, + // Function: calculate offset before scrolling offset: () => document.querySelector('#header').offsetHeight, - // The scroll target element is passed into the function - offset: target => target.offsetHeight * 2, + // The scroll target and container are passed into the function + offset: (scrollTarget, scrollContainer) => target.offsetHeight * 2, } ``` diff --git a/package-lock.json b/package-lock.json index fa65c3a..87fc95d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,9 +23,6 @@ "tailwindcss": "^4.1.8", "typescript": "^5.8.3", "vitest": "^3.2.2" - }, - "peerDependencies": { - "swup": "^4.2.0" } }, "node_modules/@ampproject/remapping": { diff --git a/package.json b/package.json index c62783b..69d0e03 100755 --- a/package.json +++ b/package.json @@ -25,9 +25,9 @@ "lint": "swup package:lint", "format": "swup package:format", "prepublishOnly": "npm run build", - "fixtures:dev": "astro dev --root tests/e2e/fixtures", - "fixtures:build": "astro build --root tests/e2e/fixtures", - "fixtures:serve": "astro build --root tests/e2e/fixtures && astro preview --root tests/e2e/fixtures", + "playground:dev": "astro dev --root playground", + "playground:build": "astro build --root playground", + "playground:serve": "astro build --root playground && astro preview --root playground", "test": "npm run test:unit && npm run test:e2e", "test:unit": "vitest run --config ./tests/unit/vitest.config.ts", "test:unit:watch": "vitest --config ./tests/unit/vitest.config.ts", @@ -73,9 +73,6 @@ "typescript": "^5.8.3", "vitest": "^3.2.2" }, - "peerDependencies": { - "swup": "^4.2.0" - }, "browserslist": [ "extends @swup/browserslist-config" ], diff --git a/tests/e2e/fixtures/.astro/content-assets.mjs b/playground/.astro/content-assets.mjs similarity index 100% rename from tests/e2e/fixtures/.astro/content-assets.mjs rename to playground/.astro/content-assets.mjs diff --git a/tests/e2e/fixtures/.astro/content-modules.mjs b/playground/.astro/content-modules.mjs similarity index 100% rename from tests/e2e/fixtures/.astro/content-modules.mjs rename to playground/.astro/content-modules.mjs diff --git a/tests/e2e/fixtures/.astro/content.d.ts b/playground/.astro/content.d.ts similarity index 100% rename from tests/e2e/fixtures/.astro/content.d.ts rename to playground/.astro/content.d.ts diff --git a/tests/e2e/fixtures/.astro/data-store.json b/playground/.astro/data-store.json similarity index 100% rename from tests/e2e/fixtures/.astro/data-store.json rename to playground/.astro/data-store.json diff --git a/tests/e2e/fixtures/.astro/settings.json b/playground/.astro/settings.json similarity index 100% rename from tests/e2e/fixtures/.astro/settings.json rename to playground/.astro/settings.json diff --git a/tests/e2e/fixtures/.astro/types.d.ts b/playground/.astro/types.d.ts similarity index 100% rename from tests/e2e/fixtures/.astro/types.d.ts rename to playground/.astro/types.d.ts diff --git a/tests/e2e/fixtures/astro.config.mjs b/playground/astro.config.mjs similarity index 100% rename from tests/e2e/fixtures/astro.config.mjs rename to playground/astro.config.mjs diff --git a/playground/src/components/AnchorsPageContent.astro b/playground/src/components/AnchorsPageContent.astro new file mode 100644 index 0000000..f4fa30f --- /dev/null +++ b/playground/src/components/AnchorsPageContent.astro @@ -0,0 +1,149 @@ +--- +import Tiles from './Tiles.astro'; +import Table from './Table.astro'; +import Nav from './Nav.astro'; +--- + +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod eligendi repudiandae + dolore deleniti fugit repellendus quibusdam, debitis earum natus? Nemo illo + exercitationem officiis, eligendi provident deserunt beatae saepe aliquam quod neque + accusantium odio fugit perspiciatis sequi earum enim itaque facilis eius maiores! Eum, + labore eaque necessitatibus itaque eos, facere quas, culpa in quo adipisci debitis error + excepturi numquam. Ad dolores adipisci nesciunt sunt delectus! Ab a facere error, ipsam + obcaecati soluta sapiente ullam iusto adipisci tempore laboriosam aliquam facilis + voluptates? Consectetur neque, obcaecati optio facere quae ab magnam alias perferendis + reiciendis facilis quasi sequi nesciunt possimus, dignissimos quisquam ullam totam + dolorem soluta asperiores error molestiae, eaque maiores laborum! Voluptas quis + excepturi perspiciatis rem nulla consequuntur unde iure perferendis fuga nihil nostrum + quae molestiae non nemo eaque commodi modi praesentium earum adipisci, sunt iste + distinctio. Vitae distinctio possimus aliquam dignissimos perferendis provident totam + repellat? Dolore a eligendi debitis numquam, consectetur ex, minima ea eum obcaecati + impedit, rerum saepe ipsa pariatur odit cupiditate dolores soluta repudiandae non + similique. Ipsam, deleniti itaque. Libero, maiores optio! Excepturi ab iste possimus, + ipsa odio quam dicta laboriosam ducimus laudantium ullam ipsam eaque neque ut! Veritatis + recusandae porro voluptatibus nulla accusamus quisquam deleniti ab sunt? Alias doloribus + temporibus quibusdam. Deserunt adipisci possimus veniam vel laboriosam recusandae, + porro, eligendi numquam quaerat accusantium aperiam eos perspiciatis ex maiores + provident, architecto sit laudantium at totam ipsa aliquam reprehenderit. Ipsum nam + laudantium ea quaerat voluptatem ullam laboriosam quis temporibus, delectus ad quibusdam + qui et itaque. Nostrum necessitatibus natus possimus deleniti maxime saepe ipsa voluptas + blanditiis minus id, temporibus ex et debitis repudiandae autem! Similique non eaque + necessitatibus ad a deserunt, libero optio facilis dolorem consequuntur quos aperiam + corporis nulla, impedit cumque mollitia nostrum voluptate corrupti reiciendis, + voluptatem pariatur tempore inventore. Dolorum, nulla quod. Sit officia fugiat + voluptatibus eos. Pariatur vitae molestias adipisci velit quasi illo ad praesentium + perferendis possimus, eius consequuntur minima provident enim ipsa minus expedita + voluptatum eveniet ratione. Corrupti perferendis amet possimus vel vitae commodi + aspernatur rem nisi voluptatum est asperiores illo aliquam alias quidem ut porro natus + assumenda, blanditiis ullam quas quia ducimus perspiciatis atque placeat. Iste quod + officia deserunt exercitationem vero perferendis blanditiis voluptates voluptas pariatur + eum, labore officiis sed corporis accusantium recusandae? Voluptatem autem natus nam + modi repellat vel. Ipsa voluptatibus quisquam minus non ea corporis impedit debitis + itaque neque assumenda omnis aliquid modi laborum, consequatur optio maiores possimus + illum sapiente, quod iusto eius deleniti quaerat! Commodi, eum iure rem eligendi + explicabo possimus. Fugiat ab at consequatur vel neque sapiente, doloribus accusamus + tempora dolorem impedit, praesentium labore enim corporis rerum. Soluta beatae + repellendus dicta labore vel accusamus similique quasi dolorem, fuga assumenda, nisi + iusto rerum veritatis totam illum ipsam! Accusamus ut consectetur incidunt consequatur + placeat neque cumque totam quaerat eaque, optio maxime esse animi earum praesentium, vel + cupiditate unde cum excepturi rerum sit. Magnam, eos ducimus repellendus earum assumenda + qui quisquam hic et inventore eum exercitationem nemo modi, ad, veniam incidunt? + Pariatur ipsam saepe at, sint voluptatum ab error optio. Culpa fugit ut, dolorum nam + nemo non iste. Rem, vero voluptas. In et corporis labore, repellat eius veritatis autem + unde maiores sapiente commodi, ducimus quisquam nobis ut, dolorem fuga porro sit + officiis voluptate. Error numquam voluptatibus, earum, quo, quas atque animi laborum + labore magnam voluptate voluptates facere suscipit quisquam at quam nobis porro optio + doloremque nesciunt veritatis vero quis cum ea. Rem minima adipisci exercitationem vitae + iure fugiat, beatae consequatur error numquam suscipit aliquam accusantium, ratione + ipsum deserunt reiciendis eligendi? Odit saepe repudiandae nam nobis porro error dolor, + tenetur facere autem aliquid eum sit officiis ipsum itaque expedita rem nesciunt ullam + odio eos, assumenda maiores. Hic doloribus dolores fugiat laborum laudantium inventore + minima accusantium dicta ut dolorum amet nemo aliquam provident odio adipisci sequi + eligendi repudiandae, vel nisi id distinctio nobis totam consequuntur voluptas. Libero + iusto totam, impedit facere assumenda earum asperiores tempore maiores numquam nostrum + quam, alias exercitationem vitae reiciendis ex consequatur eaque illo vero excepturi nam + natus! Corporis vitae facilis ad quos at ducimus cum, blanditiis voluptatem, qui eius + consequatur unde numquam quo recusandae id sunt iste vel nesciunt iusto, voluptas + aperiam quod. Eaque praesentium, iusto quaerat, laudantium consectetur veritatis ex + doloremque quos rerum autem expedita porro ipsa asperiores eius omnis pariatur id + accusamus qui. Ab provident soluta rem nam, dolor exercitationem eveniet aperiam quaerat + optio possimus ex tenetur vel assumenda reprehenderit odio eum nobis perferendis + deserunt. Magni id cupiditate minus debitis ducimus deleniti non dolorum possimus harum + ex architecto distinctio delectus cumque doloremque esse, quod optio voluptates + inventore quasi? Distinctio, ex natus harum in ullam ut ea, impedit ipsa magnam, porro + tempore. Ducimus, suscipit officiis ex numquam minus alias consectetur. Nulla quidem + obcaecati dicta doloremque quo excepturi hic quisquam neque nisi ratione cumque amet + vitae a necessitatibus perspiciatis fuga veritatis, consequuntur aliquid deleniti + placeat quae ab nemo. Blanditiis optio dolore impedit tenetur placeat! +
+|
+
+ {getLabel(colIndex, rowIndex)}
+
+ |
+ ))}
+
Scroll nested containers
+ + + +Scroll nested containers
+ + + +Full-Size Containers
+ + + +{SITE_DESCRIPTION}
+ + +|
-
- {getLabel(colIndex, rowIndex)}
-
- |
- ))}
-
{SITE_DESCRIPTION}
- -