Skip to content

Commit

Permalink
re-wrap with custom-scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
rommguy committed Mar 2, 2024
1 parent e60d6e1 commit c9a2acb
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 14 deletions.
1 change: 1 addition & 0 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
}

.app-root {
max-height: calc(100vh - 70px);
max-width: 900px;
margin: 0 auto;
padding-top: 90px;
Expand Down
31 changes: 17 additions & 14 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
import "./App.css";
import { DemoComp } from "./example/demoComp.tsx";
import { CustomScroll } from "./customScroll.tsx";

export const App = () => {
return (
<div data-testid="app-root" className="app-root">
<div className="demo-title">React-Custom-Scroll Demo page</div>
<div className="demo-subtitle">
react-custom-scroll lets you design unique scrollbars without
compromising on performance. It preserves the browser's native scrolling
mechanism, ensuring a smooth, familiar user experience. Its hover design
means no content is obscured, offering a consistent look across browsers
and operating systems.
<CustomScroll>
<div data-testid="app-root" className="app-root">
<div className="demo-title">React-Custom-Scroll Demo page</div>
<div className="demo-subtitle">
react-custom-scroll lets you design unique scrollbars without
compromising on performance. It preserves the browser's native
scrolling mechanism, ensuring a smooth, familiar user experience. Its
hover design means no content is obscured, offering a consistent look
across browsers and operating systems.
</div>
<DemoComp demoType="compare-with-native" descriptionSide="left" />
<DemoComp demoType="crazy-designer" descriptionSide="right" />
<DemoComp demoType="dynamic-content" descriptionSide="left" />
<DemoComp demoType="allow-outer-scroll" descriptionSide="right" />
<DemoComp demoType="flex" descriptionSide="left" />
</div>
<DemoComp demoType="compare-with-native" descriptionSide="left" />
<DemoComp demoType="crazy-designer" descriptionSide="right" />
<DemoComp demoType="dynamic-content" descriptionSide="left" />
<DemoComp demoType="allow-outer-scroll" descriptionSide="right" />
<DemoComp demoType="flex" descriptionSide="left" />
</div>
</CustomScroll>
);
};

0 comments on commit c9a2acb

Please sign in to comment.