Scroll Snap

Reference

shilp.config.jscopy to clipboard
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    live: {
      scroll: {
        snap: {
          DEFAULT: {
            property: "scroll-snap-type: <v><i>;",
            values: {
              x: {
                DEFAULT: "x",
                active: "x mandatory",
                lazy: "x proximity",
              },
              y: {
                DEFAULT: "y",
                active: "y mandatory",
                lazy: "y proximity",
              },
              both: {
                DEFAULT: "both",
                active: "both mandatory",
                lazy: "both proximity",
              },
              block: {
                DEFAULT: "block",
                active: "block mandatory",
                lazy: "block proximity",
              },
              inline: {
                DEFAULT: "inline",
                active: "inline mandatory",
                lazy: "inline proximity",
              },
            },
          },

          align: {
            property: "scroll-snap-align: <v><i>;",
            values: {
              start: "start",
              center: "center",
              end: "end",
              none: "none",
              // can add two values here for x and y
              // https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align#syntax
            },
          },

          stop: {
            property: "scroll-snap-stop: <v><i>;",
            values: {
              normal: "normal",
              always: "always",
            },
          },
        },
      },
    },
  },
};

export default shilpConfig;