hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fine-tuning rootMargin prop

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-03-11 10:43:12 +03:00
parent 85bcdcc2c7
commit c11b272cba
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/renderer/components/+preferences/preferences.tsx
View File

@ -30,9 +30,10 @@ export class Preferences extends React.Component {
render() { render() {
const { preferences } = userStore; const { preferences } = userStore;
const header = <h2>Preferences</h2>; const header = <h2>Preferences</h2>;
const rootMargin = "80px 0px -85%"; // Cut header size from the top and 85% from the bottom of viewport
return ( return (
<ScrollSpy render={navigation => ( <ScrollSpy rootMargin={rootMargin} render={navigation => (
<PageLayout <PageLayout
showOnTop showOnTop
navigation={navigation} navigation={navigation}

9
src/renderer/components/scroll-spy/scroll-spy.tsx
View File

@ -4,6 +4,7 @@ import { NavigationTree } from "../tree-view";
interface Props extends React.DOMAttributes<HTMLElement> { interface Props extends React.DOMAttributes<HTMLElement> {
render: (data: NavigationTree[]) => JSX.Element render: (data: NavigationTree[]) => JSX.Element
rootMargin?: string // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
} }
export function ScrollSpy(props: Props) { export function ScrollSpy(props: Props) {
@ -66,7 +67,7 @@ export function ScrollSpy(props: Props) {
// Shrinking root area from the bottom // Shrinking root area from the bottom
// Allows to fire observer event only if target scrolled up to top of the page) // Allows to fire observer event only if target scrolled up to top of the page)
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
rootMargin: "0px 0px -85%", rootMargin: props.rootMargin,
}; };
sections.current.forEach((section) => { sections.current.forEach((section) => {
@ -94,3 +95,9 @@ export function ScrollSpy(props: Props) {
</div> </div>
); );
} }
ScrollSpy.defaultProps = {
// Shrinking root area from the bottom
// Allows to fire observer event only if target scrolled up to top of the page)
rootMargin: "0px 0px -85%"
};