Hopp til innhold

use­Scroll­Into­View

Lar deg automatisk scrolle et element til det blir synlig.

Kom i gang

Se oversikten for hvordan installere pakken.

Bruk

Hooken returner scrollfunksjonen om du vil trigge den manuelt, og det er mulig å skru av automatisk scrolling om du vil ha full manuell kontroll. Du har også tilgang på alle options tilgjengelig for scrollIntoView.

useScrollIntoView
Visning
Tema
Tetthet
const [autoScroll, toggleAutoScroll] = React.useState(false);

const [timeout, updateTimeout] = React.useState(0);



const ref = React.useRef(null);

const [manualScroll] = useScrollIntoView({ ref, timeout, autoScroll });



return (

  <section style={{ height: "100vh", position: "relative" }}>

    <div style={{ display: "flex", flexDirection: "column" }}>

      <div>

        <button

          className="jkl-button jkl-button--primary jkl-spacing-xl--bottom"

          onClick={() => toggleAutoScroll(!autoScroll)}

        >

          {autoScroll ? "Skru av" : "Skru på"}

        </button>

        <button

          className="jkl-button jkl-button--secondary jkl-spacing-l--left"

          onClick={manualScroll}

        >

          Scroll

        </button>

      </div>

      <label htmlFor="autoscroll-input" className="jkl-label--medium">

        Sett ventetid før autoscroll

      </label>

      <input

        id="autoscroll-input"

        className="jkl-text-input__input"

        style={{ width: "10ch" }}

        value={timeout}

        type="number"

        onChange={(val) => {

          toggleAutoScroll(false);

          if (val.currentTarget.value !== "") {

            updateTimeout(parseInt(val.currentTarget.value, 10));

          }

        }}

      />

    </div>

    <div ref={ref} style={{ position: "absolute", bottom: 0 }}>

      AutoScroll here

    </div>

  </section>

);

React API

Her finner du en oversikt over props på komponentene i pakken.