feat: horizontal scroll

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-scrolling",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Scroll to given elements with smooth animation",
   "author": "Valmisson Grizorte",
   "license": "MIT",

src/actions/ScrollTo.ts

@@ -8,7 +8,10 @@ import scrolling from '../shared/scrolling'
 const elementsList = get(elements)
 
 // handle with scrolling
-const handle = async (event: Event, options: ScrollToOptions): Promise<void> => {
+const handle = async (
+  event: Event,
+  options: ScrollToOptions
+): Promise<void> => {
   if (!options.passive) event.preventDefault()
 
   const { ref, onDone, onStart } = options
@@ -39,7 +42,8 @@ const handle = async (event: Event, options: ScrollToOptions): Promise<void> =>
  * @param options - The element reference or global options
  */
 
-const scrollTo = ( // eslint-disable-line @typescript-eslint/explicit-module-boundary-types
+const scrollTo = (
+  // eslint-disable-line @typescript-eslint/explicit-module-boundary-types
   node: HTMLElement,
   options: string | ScrollToOptions
 ) => {
@@ -53,8 +57,8 @@ const scrollTo = ( // eslint-disable-line @typescript-eslint/explicit-module-bou
   }
 
   typeof options === 'string'
-    ? opts.ref = options
-    : opts = Object.assign(opts, options)
+    ? (opts.ref = options)
+    : (opts = Object.assign(opts, options))
 
   opts.ref = sanitize(opts.ref)
 

src/functions/scrolling.ts

@@ -2,7 +2,7 @@ import { get } from 'svelte/store'
 import { elements } from '../store'
 import { getGlobalOptions } from '../internal/globalOptions'
 import { getElement, getPosition, sanitize } from '../shared/utils'
-import type { GlobalOptions } from '../types/options'
+import type { Coord, GlobalOptions } from '../types/options'
 import scrolling from '../shared/scrolling'
 
 const globalOptions = getGlobalOptions()
@@ -17,7 +17,7 @@ export const scrollTop = async (
   options?: Partial<GlobalOptions>
 ): Promise<void> => {
   const opts = Object.assign(globalOptions, options)
-  const endPosition = 0
+  const endPosition = { x: 0, y: 0 }
 
   const { duration, offset, onStart, onDone } = opts
 
@@ -44,13 +44,16 @@ export const scrollBottom = async (
   const body = document.body
   const html = document.documentElement
 
-  const endPosition = Math.max(
-    body.scrollHeight,
-    body.offsetHeight,
-    html.scrollHeight,
-    html.clientHeight,
-    html.offsetHeight
-  )
+  const endPosition = {
+    x: 0,
+    y: Math.max(
+      body.scrollHeight,
+      body.offsetHeight,
+      html.scrollHeight,
+      html.clientHeight,
+      html.offsetHeight
+    )
+  }
 
   onStart && onStart({ offset, duration, endPosition })
 
@@ -103,7 +106,7 @@ export const scrollElement = async (
  */
 
 export const scrollPosition = async (
-  position: number,
+  position: Coord,
   options?: Partial<GlobalOptions>
 ): Promise<void> => {
   if (!position || typeof position !== 'number') {

src/shared/scrolling.ts

@@ -1,20 +1,33 @@
 import smoothScroll from './smoothScroll'
 import { getGlobalOptions } from '../internal/globalOptions'
-import type { GlobalOptions } from '../types/options'
+import type { Coord, GlobalOptions } from '../types/options'
 
 const globalOptions = getGlobalOptions()
 
 const scrolling = async (
-  endPosition: number,
+  coord: Coord,
   opts: GlobalOptions
 ): Promise<void> => {
   const { duration, easing, offset } = Object.assign(globalOptions, opts)
 
-  const start = window.pageYOffset
-  const end = endPosition + offset
+  const startY = window.pageYOffset
+  const startX = window.pageXOffset
+  const endX = coord.x + offset
+  const endY = coord.y
 
-  await smoothScroll({ start, end, duration, easing }, (position: number) => {
-    window.scroll(0, position)
+  await smoothScroll({
+    start: {
+      x: startX,
+      y: startY
+    },
+    end: {
+      x: endX,
+      y: endY
+    },
+    duration,
+    easing
+  }, (coord: Coord) => {
+    window.scroll(coord.x, coord.y)
   })
 }
 

src/shared/smoothScroll.ts

@@ -1,4 +1,4 @@
-import type { SmoothOptions } from '../types/options'
+import type { Coord, SmoothOptions } from '../types/options'
 
 const currentPosition = (
   start: number,
@@ -14,19 +14,17 @@ const currentPosition = (
 
 const smoothScroll = async (
   options: SmoothOptions,
-  callback: (positon: number) => void
+  callback: (coord: Coord) => void
 ): Promise<void> => {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const { start, end, duration, easing } = options
     const clock = Date.now()
 
     const step = () => {
       const elapsed = Date.now() - clock
-      const position = currentPosition(
-        start, end, elapsed, duration, easing
-      )
-
-      callback(position)
+      const positionX = currentPosition(start.x, end.x, elapsed, duration, easing)
+      const positionY = currentPosition(start.y, end.y, elapsed, duration, easing)
+      callback({ x: positionX, y: positionY })
 
       if (elapsed > duration) return resolve()
 

src/shared/utils.ts

@@ -1,3 +1,4 @@
+import type { Coord } from 'src/types/options'
 import type { ElementReference } from '../types/reference'
 
 export const sanitize = (hash: string): string => {
@@ -21,6 +22,6 @@ export const getElement = (
 
 export const getPosition = (
   element: HTMLElement
-): number => {
-  return element.offsetTop
+): Coord => {
+  return { y: element.offsetTop, x: element.offsetLeft }
 }

src/types/options.ts

@@ -1,8 +1,14 @@
+
+export interface Coord {
+  x: number;
+  y: number
+}
+
 export interface HooksOptions {
   element?: HTMLElement,
   offset: number,
   duration: number,
-  endPosition: number
+  endPosition: Coord
 }
 
 export interface GlobalOptions {
@@ -15,8 +21,8 @@ export interface GlobalOptions {
 }
 
 export interface SmoothOptions {
-  start: number
-  end: number
+  start: Coord;
+  end: Coord;
   duration: number
   easing: (t: number) => number
 }