Создание прокрутки div только при наведении курсора

Моя цель - иметь 2 разных div с прокруткой, и я не знаю, как именно это сделать. Я пробовал разные свойства переполнения, но могу прокрутить только одно.

.profile {
  width: 100%;
  display: flex;
}

.user-posts {
  overflow: hidden;
  width: 80%;
}

.related-artists {
  margin-top: 20px;
  width: 20%;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div className = "profile">
  <div className = "user-posts">
    <ReactCSSTransitionGroup transitionName = "slide" transitionEnterTimeout = {300} transitionLeaveTimeout = {300} transitionAppear = {true} transitionAppearTimeout = {500}>
      {userPosts}
    </ReactCSSTransitionGroup>
  </div>
  <div className = "related-artists">{relatedArtists}</div>
</div>

javascript css reactjs

21.07.2018 03:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

260

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если я правильно понял, что-то вроде этого должно сработать. Я произвольно задал свойства высоты.

.profile {
  width: 100%; 
  position: absolute;
  display: flex;
  height: 100%;
}

.user-posts {
  position: relative;
  overflow: auto;
  width: 20%;
  height: 40%;
}

.related-artists {
  position: relative;
  overflow: auto;
  margin-top: 20px;
  width: 20%;
  height: 40%;
}

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

это сработало! Все, что мне нужно было сделать .profile абсолютным. Спасибо!

— 21.07.2018 06:10

21.07.2018 04:02