Позиционирующая полоса прокрутки

Question

Обычно, когда применяется полоса прокрутки, она начинается с начала страницы. Мне нужно, чтобы он начинался прямо с того места, где начинается указанный элемент DOM.

import React from "react";
import "./styles.css";
function Home(){
  return (<h1 style={{position:'fixed'}}>Home</h1>);
}
function Contact(){
  return (<h1 style={{position:'absolute',top:'40px',height:'200vh',background:'skyblue',width:'100vw'}}>
    Contact</h1>);
}
export default function App() {
  return (
    <div className="App">
      <Home />
      <Contact />

    </div>
  );
}

Я применил height:200vh к компоненту контакта. Полоса прокрутки должна начинаться только с элемента Contact DOM. Положение домашнего компонента всегда должно быть фиксированным. Это всего лишь демонстрация, так как я буду использовать это предложение для работы над моим одностраничным приложением. Любая помощь будет отличной. Заранее спасибо. !!

Answer 1

тело должно иметь overflow-y: hidden, а Контакт должен иметь overflow-y: scroll или overflow-y: auto

// App.js

import React from "react";
import "./styles.css";
function Home() {
  return (
    <h1
      style={{
        margin: 0
      }}
    >
      Home
    </h1>
  );
}
function Contact() {
  return (
    <div
      style={{
        background: "skyblue none repeat scroll 0% 0%",
        position: "absolute",
        top: "40px",
        bottom: 0,
        width: "100%",
        overflowY: "scroll"
      }}
    >
      <h1
        style={{
          height: "200vh",
          margin: 0
        }}
      >
        Contact
      </h1>
    </div>
  );
}
export default function App() {
  return (
    <div className="App">
      <Home />
      <Contact />
    </div>
  );
}

---

// styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

body {
  margin: 0;
  overflow-y: hidden;
}