Ambrose Liew

Y Mandatory
X Mandatory
ScrollSnap.tsx
ScrollSnap.module.css

import React from "react";
import styles from "./ScrollSnap.module.css";
export default function ScrollSnap() {
  const [yMandatory, setYMandatory] = React.useState(false);
  const [xMandatory, setXMandatory] = React.useState(false);
  return (
    <div>
      <div
        style={{ scrollSnapType: `y ${yMandatory ? "mandatory" : ""}` }}
        className={styles.yParent}
      >
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <label className={styles.label}>
        Y Mandatory
        <input
          type="checkbox"
          defaultChecked={yMandatory}
          onClick={() => setYMandatory(!yMandatory)}
        />
      </label>
      <div
        style={{ scrollSnapType: `x ${xMandatory ? "mandatory" : ""}` }}
        className={styles.xParent}
      >
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <label className={styles.label}>
        X Mandatory
        <input
          type="checkbox"
          defaultChecked={xMandatory}
          onClick={() => setXMandatory(!xMandatory)}
        />
      </label>
    </div>
  );
}