CSSスムーズスクロール画面作成

レスポンシブ対応
visionary-japan · Apr 4, 2024 · 7d857ec · 7d857ec
1 parent 4e37e44
commit 7d857ec
Show file tree

Hide file tree

Showing 13 changed files with 351 additions and 117 deletions.
diff --git a/src/components/button/ButtonVite.tsx b/src/components/button/ButtonVite.tsx
@@ -2,60 +2,15 @@ import * as stylex from '@stylexjs/stylex';
 import type { StyleXStyles } from '@stylexjs/stylex';
 import type { UserAuthoredStyles } from '@stylexjs/stylex/lib/StyleXTypes';
 import { type ButtonHTMLAttributes, forwardRef, memo } from 'react';
+import { sizes, styls } from './buttonViteStyle';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'small' | 'medium' | 'large';
     styles?: StyleXStyles<UserAuthoredStyles>;
 }
 
-const styls = stylex.create({
-    base: {
-        fontFamily: 'inherit',
-        color: '#646cff',
-        cursor: 'pointer',
-        backgroundColor: {
-            default: '#1a1a1a',
-            '@media (prefers-color-scheme: dark)': '#1a1a1a',
-            '@media (prefers-color-scheme: light)': '#f9f9f9',
-        },
-        outline: 'none', // デフォルトのスタイル対策
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: {
-            default: 'transparent',
-            ':hover': '#646cff',
-            ':focus': '#eee',
-            ':focus-visible': '#eee',
-        },
-        borderRadius: 8,
-        transition: 'border-color 0.25s',
-        willChange: 'border-color',
-    },
-});
-
-const sizes = stylex.create({
-    small: {
-        width: 96,
-        height: 32,
-        fontSize: '0.8em',
-        fontWeight: 300,
-    },
-    medium: {
-        width: 128,
-        height: 48,
-        fontSize: '1em',
-        fontWeight: 500,
-    },
-    large: {
-        width: 160,
-        height: 64,
-        fontSize: '1.2em',
-        fontWeight: 700,
-    },
-});
-
 const Component = forwardRef<HTMLButtonElement, Props>(
-    ({ type = 'button', size = 'medium', children, styles, ...attrs }, ref) => (
+    ({ type = 'button', size = 'medium', styles, children, ...attrs }, ref) => (
         <button
             ref={ref}
             type={type}

diff --git a/src/components/button/ButtonViteAnchor.tsx b/src/components/button/ButtonViteAnchor.tsx
@@ -0,0 +1,24 @@
+import * as stylex from '@stylexjs/stylex';
+import type { StyleXStyles } from '@stylexjs/stylex';
+import type { UserAuthoredStyles } from '@stylexjs/stylex/lib/StyleXTypes';
+import { type AnchorHTMLAttributes, forwardRef, memo } from 'react';
+import { sizes, styls } from './buttonViteStyle';
+
+interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    size?: 'small' | 'medium' | 'large';
+    styles?: StyleXStyles<UserAuthoredStyles>;
+}
+
+const Component = forwardRef<HTMLAnchorElement, Props>(
+    ({ size = 'medium', styles, children, ...attrs }, ref) => (
+        <a
+            ref={ref}
+            {...stylex.props(styls.base, sizes[size], styles)}
+            {...attrs}
+        >
+            {children}
+        </a>
+    ),
+);
+
+export const ButtonViteAnchor = memo(Component);
diff --git a/src/components/button/buttonViteStyle.ts b/src/components/button/buttonViteStyle.ts
@@ -0,0 +1,49 @@
+import stylex from '@stylexjs/stylex';
+
+export const styls = stylex.create({
+    base: {
+        fontFamily: 'inherit',
+        color: '#646cff',
+        display: 'grid',
+        placeItems: 'center',
+        cursor: 'pointer',
+        backgroundColor: {
+            default: '#1a1a1a',
+            '@media (prefers-color-scheme: dark)': '#1a1a1a',
+            '@media (prefers-color-scheme: light)': '#f9f9f9',
+        },
+        outline: 'none', // デフォルトのスタイル対策
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: {
+            default: 'transparent',
+            ':hover': '#646cff',
+            ':focus': '#eee',
+            ':focus-visible': '#eee',
+        },
+        borderRadius: 8,
+        transition: 'border-color 0.25s',
+        willChange: 'border-color',
+    },
+});
+
+export const sizes = stylex.create({
+    small: {
+        width: 96,
+        height: 32,
+        fontSize: '0.8em',
+        fontWeight: 300,
+    },
+    medium: {
+        width: 128,
+        height: 48,
+        fontSize: '1em',
+        fontWeight: 500,
+    },
+    large: {
+        width: 160,
+        height: 64,
+        fontSize: '1.2em',
+        fontWeight: 700,
+    },
+});
diff --git a/src/components/div/Scrollbar.tsx b/src/components/div/Scrollbar.tsx
@@ -19,7 +19,7 @@ interface Props {
     hasButton?: boolean;
 }
 
-const SCROLLBAR_WIDTH = 16;
+const SCROLLBAR_WIDTH = 8;
 const SCROLLBAR_MARGIN = 1;
 const SCROLL_SUB = 300;
 

diff --git a/src/components/heading/H1.tsx b/src/components/heading/H1.tsx
@@ -14,8 +14,11 @@ const styles = stylex.create({
     },
 });
 
-const Component: FC<Props> = ({ isLeft, children, ...attrs }) => (
-    <h1 {...attrs} {...stylex.props(styles.base, isLeft && styles.left)}>
+const Component: FC<Props> = ({ isLeft, children, propsStyles, ...attrs }) => (
+    <h1
+        {...attrs}
+        {...stylex.props(styles.base, isLeft && styles.left, propsStyles)}
+    >
         {children}
     </h1>
 );

diff --git a/src/components/heading/H2.tsx b/src/components/heading/H2.tsx
@@ -14,8 +14,11 @@ const styles = stylex.create({
     },
 });
 
-const Component: FC<Props> = ({ isLeft, children, ...attrs }) => (
-    <h2 {...attrs} {...stylex.props(styles.base, isLeft && styles.left)}>
+const Component: FC<Props> = ({ isLeft, children, propsStyles, ...attrs }) => (
+    <h2
+        {...attrs}
+        {...stylex.props(styles.base, isLeft && styles.left, propsStyles)}
+    >
         {children}
     </h2>
 );

diff --git a/src/components/heading/H3.tsx b/src/components/heading/H3.tsx
@@ -14,8 +14,11 @@ const styles = stylex.create({
     },
 });
 
-const Component: FC<Props> = ({ isLeft, children, ...attrs }) => (
-    <h3 {...attrs} {...stylex.props(styles.base, isLeft && styles.left)}>
+const Component: FC<Props> = ({ isLeft, children, propsStyles, ...attrs }) => (
+    <h3
+        {...attrs}
+        {...stylex.props(styles.base, isLeft && styles.left, propsStyles)}
+    >
         {children}
     </h3>
 );

diff --git a/src/components/heading/index.d.ts b/src/components/heading/index.d.ts
@@ -1,5 +1,8 @@
+import type { StyleXStyles } from '@stylexjs/stylex';
+import type { UserAuthoredStyles } from '@stylexjs/stylex/lib/StyleXTypes';
 import type { HTMLAttributes } from 'react';
 
 export interface Props extends HTMLAttributes<HTMLHeadingElement> {
     isLeft?: boolean;
+    propsStyles?: StyleXStyles<UserAuthoredStyles>;
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -8,11 +8,13 @@ import { Btn } from './pages/Btn.tsx';
 import { Index } from './pages/Index.tsx';
 import { Public } from './pages/Public.tsx';
 import { Query } from './pages/Query.tsx';
-import { Scroll } from './pages/Scroll.tsx';
 import { Beautiful } from './pages/dnd/Beautiful.tsx';
 import { HTML5 } from './pages/dnd/HTML5.tsx';
 import { Pointer } from './pages/dnd/Pointer.tsx';
 import { Sortablejs } from './pages/dnd/Sortablejs.tsx';
+import { ScrollCss } from './pages/scroll/ScrollCss.tsx';
+import { ScrollDiv } from './pages/scroll/ScrollDiv.tsx';
+import { Scroll } from './pages/scroll/Scroll.tsx';
 
 const App: FC = () => {
     const { ROOT_NAME } = useEnv();
@@ -30,6 +32,8 @@ const App: FC = () => {
                 <Route path='query' element={<Query />} />
                 <Route path='public' element={<Public />} />
                 <Route path='scroll' element={<Scroll />} />
+                <Route path='scrollDiv' element={<ScrollDiv />} />
+                <Route path='scrollCss' element={<ScrollCss />} />
                 <Route path='*' element={<Navigate to='/' />} />
             </Routes>
         </BrowserRouter>

diff --git a/src/pages/scroll/Scroll.tsx b/src/pages/scroll/Scroll.tsx
@@ -0,0 +1,68 @@
+import stylex from '@stylexjs/stylex';
+import { type FC, memo, useCallback, useRef } from 'react';
+import { ButtonVite } from '../../components/button/ButtonVite';
+import { DivCustom } from '../../components/div/DivCustom';
+import { useScrollSmooth } from '../../hooks/useScrollSmooth';
+import { ScrollCss } from './ScrollCss';
+import { ScrollDiv } from './ScrollDiv';
+import { stylesCommon } from './styles';
+
+const styles = stylex.create({
+    wrap: {
+        height: '200lvh',
+    },
+    fixed: {
+        position: 'fixed',
+        right: 0,
+        bottom: 0,
+    },
+});
+
+const Component: FC = () => {
+    const refWindowTarget = useRef<HTMLDivElement>(null);
+
+    const { scrollSmooth } = useScrollSmooth();
+
+    const getNewTopWindow = useCallback(() => {
+        const topMax = window.innerHeight;
+        const topNow = window.scrollY;
+        const topSub = topMax / 4;
+        return topNow >= topMax - 1 ? 0 : Math.min(topNow + topSub, topMax);
+    }, []);
+
+    const scrollWindowNormal = useCallback(() => {
+        window.scrollTo(0, getNewTopWindow());
+    }, [getNewTopWindow]);
+
+    const scrollWindowSmooth = useCallback(() => {
+        scrollSmooth(refWindowTarget, getNewTopWindow());
+    }, [getNewTopWindow, scrollSmooth]);
+
+    return (
+        <DivCustom styles={styles.wrap}>
+            {/* Divスクロール */}
+            <ScrollDiv />
+            {/* CSSスクロール */}
+            <ScrollCss />
+            {/* Windowスクロール */}
+            <div
+                ref={refWindowTarget}
+                id='window-target'
+                {...stylex.props(stylesCommon.target)}
+            />
+            <DivCustom
+                styleTypes={['flexColumn', 'gap', 'margin']}
+                styles={styles.fixed}
+            >
+                <ButtonVite size='large' onClick={scrollWindowNormal}>
+                    Normal Scroll
+                </ButtonVite>
+                <ButtonVite size='large' onClick={scrollWindowSmooth}>
+                    Smooth Scroll
+                </ButtonVite>
+            </DivCustom>
+        </DivCustom>
+    );
+};
+
+export const Scroll = memo(Component);