Added scroll into view test.

Author: ciscoheat

src/routes/tests/scroll-into-view/+page.server.ts

@@ -0,0 +1,23 @@
+import type { Actions, PageServerLoad } from './$types';
+import { message, superValidate } from '$lib/server';
+import { schema } from './schema';
+import { fail } from '@sveltejs/kit';
+
+export const load = (async () => {
+  const form = await superValidate(schema);
+  return { form };
+}) satisfies PageServerLoad;
+
+export const actions = {
+  default: async ({ request }) => {
+    const formData = await request.formData();
+    console.log(formData);
+
+    const form = await superValidate(formData, schema);
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, 'Posted OK!');
+  }
+} satisfies Actions;

src/routes/tests/scroll-into-view/+page.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import type { PageData } from './$types';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { schema } from './schema';
+
+  export let data: PageData;
+
+  const { form, errors, tainted, message, enhance } = superForm(data.form, {
+    scrollToError: { behavior: 'smooth', block: 'center', inline: 'center' },
+    taintedMessage: null
+  });
+
+  let nameField: HTMLInputElement;
+  let isVisible = false;
+
+  function checkVisible() {
+    if (isElementInViewport(nameField)) isVisible = true;
+  }
+
+  // Thanks to https://stackoverflow.com/a/7557433
+  function isElementInViewport(el: Element) {
+    var rect = el.getBoundingClientRect();
+
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight ||
+          document.documentElement
+            .clientHeight) /* or $(window).height() */ &&
+      rect.right <=
+        (window.innerWidth ||
+          document.documentElement.clientWidth) /* or $(window).width() */
+    );
+  }
+</script>
+
+<div>Visible: {isVisible}</div>
+
+<div class="scroller" on:scroll={checkVisible}>
+  {#if $message}<h4>{$message}</h4>{/if}
+
+  <form method="POST" use:enhance>
+    <div>
+      <button id="submit">Submit</button>
+    </div>
+    <label>
+      Name: <input
+        bind:this={nameField}
+        name="name"
+        id="name"
+        aria-invalid={$errors.name ? 'true' : undefined}
+        bind:value={$form.name}
+      />
+      {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+    </label>
+  </form>
+</div>
+
+<style lang="scss">
+  .scroller {
+    height: 300px;
+    overflow: scroll;
+  }
+
+  form {
+    margin: 2rem 0;
+
+    label {
+      margin: 1000px 1000px;
+      padding: 500px;
+    }
+
+    input {
+      background-color: #dedede;
+    }
+
+    .invalid {
+      color: crimson;
+    }
+  }
+</style>

src/routes/tests/scroll-into-view/schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  name: z.string().min(2)
+});