как отобразить содержимое раздела, не допуская его переполнения в другой раздел React.js

#javascript #reactjs #frontend

Вопрос:

У меня есть раздел «Временная шкала», который перетекает в другой раздел «Контакты» на моем веб-сайте React.

Что я могу сделать, чтобы все содержимое временной шкалы отображалось, но также не переливалось в другой раздел?

Правка: Светло-голубая часть-это место, где начинается секция контактов

Редактировать:

 import React from 'react' import './app.scss'; import Navbar from "./components/navbar/Navbar" import Intro from "./components/intro/Intro" import Menu from "./components/menu/Menu" import Timeline from './components/timeline/Timeline'; import Contact from "./components/contact/Contact" import { useState } from "react" App.jsx function App() {  const [menuOpen, setMenuOpen] = useState(false)  return (  lt;div className="app"gt;  lt;Navbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/gt;  lt;Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/gt;  lt;div className="sections"gt;  lt;Intro/gt;  lt;Timeline/gt;  lt;Contact/gt;  lt;/divgt;  lt;/divgt;  ); }

приложение.scss

 .app {  height: 100vh;   .sections {  width: 100%;  height: calc(100vh - 70px);  // background-color: #1F1D36;  position: relative;  top: 70px;  scroll-behavior: smooth;  display: flex;  scroll-snap-type: y mandatory;  scrollbar-width: none; // for firefox  amp;::-webkit-scrollbar{  display: none;  }   gt; * {  width: 100vw;  height: calc(100vh - 70px);  scroll-snap-align: start;  }  } }

1. Я не уверен, какого поведения вы хотите вместо этого. Вы хотите, чтобы контакт начинался ниже, чтобы на временной шкале было больше места? Вы хотите отключить временную шкалу, с которой начинается контакт? Вам нужна полоса прокрутки на временной шкале, чтобы она не вторгалась в пространство контакта?

2. да, именно я хочу, чтобы контакт начинался ниже, чтобы временная шкала могла динамически увеличиваться в пространстве по мере добавления новых событий

3. @Ben Я добавил часть своего кода для справки

Ответ №1:

Добавьте max-height в .sections содержащую временную шкалу и добавьте overflow-y:auto .

Это останавливает дополнительное расширение раздела и заставляет содержимое прокручиваться.

Вот код, на который вы можете ссылаться.

 *{  padding:0;  margin:0;  box-sizing: border-box; }  .child{  height: calc(100vh - 70px); }  .child:first-child{  background: yellow;  max-height: calc(100vh - 70px);  overflow-y:auto; }  .child:last-child{  background: lightblue; }  .large{  height: 900px;  background: white;  margin: 2rem; }

 lt;htmlgt;  lt;bodygt;  lt;div id="parent"gt;  lt;div class="child"gt;  lt;div class="large"gt;lt;/divgt;  lt;/divgt;  lt;div class="child"gt;lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;

1. Привет, Химаншу, спасибо за ответ! Поэтому я добавил это обрезанное .sections:nth-child(2) { max-height: calc(100vh - 70px); overflow-y:auto; } , но это все равно не возымело никакого эффекта, оно все еще переполнялось

2. Является ли 2-й дочерний компонент компонентом, имеющим временную шкалу?

3. Да, если вы видите мой код в моем отредактированном ответе, я включил порядок всех разделов, он включает Вступление, Временную шкалу и контакты

4. подождите, это просто сработало, я пошел и отредактировал css-файл, указанный для временной шкалы. Спасибо!