index.d.ts 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /** @public */
  2. export declare const compute: (
  3. target: Element,
  4. options: Options
  5. ) => ScrollAction[]
  6. /** @public */
  7. export declare interface Options {
  8. /**
  9. * Control the logical scroll position on the y-axis. The spec states that the `block` direction is related to the [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode), but this is not implemented yet in this library.
  10. * This means that `block: 'start'` aligns to the top edge and `block: 'end'` to the bottom.
  11. * @defaultValue 'center'
  12. */
  13. block?: ScrollLogicalPosition
  14. /**
  15. * Like `block` this is affected by the [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode). In left-to-right pages `inline: 'start'` will align to the left edge. In right-to-left it should be flipped. This will be supported in a future release.
  16. * @defaultValue 'nearest'
  17. */
  18. inline?: ScrollLogicalPosition
  19. /**
  20. * This is a proposed addition to the spec that you can track here: https://github.com/w3c/csswg-drafts/pull/5677
  21. *
  22. * This library will be updated to reflect any changes to the spec and will provide a migration path.
  23. * To be backwards compatible with `Element.scrollIntoViewIfNeeded` if something is not 100% visible it will count as "needs scrolling". If you need a different visibility ratio your best option would be to implement an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
  24. * @defaultValue 'always'
  25. */
  26. scrollMode?: ScrollMode
  27. /**
  28. * By default there is no boundary. All the parent elements of your target is checked until it reaches the viewport ([`document.scrollingElement`](https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement)) when calculating layout and what to scroll.
  29. * By passing a boundary you can short-circuit this loop depending on your needs:
  30. *
  31. * - Prevent the browser window from scrolling.
  32. * - Scroll elements into view in a list, without scrolling container elements.
  33. *
  34. * You can also pass a function to do more dynamic checks to override the scroll scoping:
  35. *
  36. * ```js
  37. * let actions = compute(target, {
  38. * boundary: (parent) => {
  39. * // By default `overflow: hidden` elements are allowed, only `overflow: visible | clip` is skipped as
  40. * // this is required by the CSSOM spec
  41. * if (getComputedStyle(parent)['overflow'] === 'hidden') {
  42. * return false
  43. * }
  44. * return true
  45. * },
  46. * })
  47. * ```
  48. * @defaultValue null
  49. */
  50. boundary?: Element | ((parent: Element) => boolean) | null
  51. /**
  52. * New option that skips auto-scrolling all nodes with overflow: hidden set
  53. * See FF implementation: https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18
  54. * @defaultValue false
  55. * @public
  56. */
  57. skipOverflowHiddenElements?: boolean
  58. }
  59. /** @public */
  60. export declare interface ScrollAction {
  61. el: Element
  62. top: number
  63. left: number
  64. }
  65. /**
  66. * This new option is tracked in this PR, which is the most likely candidate at the time: https://github.com/w3c/csswg-drafts/pull/1805
  67. * @public
  68. */
  69. export declare type ScrollMode = 'always' | 'if-needed'
  70. export {}