Как сделать активным блок с текстом для прокрутки колесом мыши при наведении?

Question

[mUchenik]

Есть участок кода:

<div id="portfolio-entry-26" class="horizontal-container" style="top: 10.5px; height: 556px;"><div class="entry-js-parallax__placeholder" style="
	width: 600px;
	height: 100%;
"></div>

			<div class="entry-horizontal entry-single-portfolio entry-horizontal--text entry-js-parallax is-visible is-sticky is-active" style="width: 600px; top: 93.5px; opacity: 1; height: 556px;">
	<div class="entry-single-portfolio__inner">
		<h1 class="entry-single-portfolio__title">	</h1>

					<h2 class="entry-single-portfolio__subtitle"></h2>
		
					<div class="entry-single-portfolio__content">
				<p style="text-align: left;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur explicabo ex dolorem itaque voluptas repudiandae laudantium. Hic iusto possimus, quasi, nemo suscipit inventore vel illum sit doloremque sunt voluptatem reprehenderit?</p>
<p style="text-align: left;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab incidunt quisquam labore temporibus vel quam aliquid atque nobis aliquam sed quo reprehenderit sint officiis autem laborum, rerum ipsam reiciendis? Corrupti.</p>
			</div>
			<!--.entry-content-->
		
	</div>
</div>
			
				
			<figure class="entry-horizontal js__image-data js__hcol js__lazy" data-lsrc="....jpg" data-src="....jpg" data-size="748x1000" style="width: 415px; height: 556px;"><img src="....jpg" style="opacity: 1; display: block;" class="">

									
										<noscript>
						<picture><source srcset="....jpg" alt="" class="webpexpress-processed"></picture>
					</noscript>
				
				

				</figure>			
		</div>

Выглядит это как горизонтальная галерея, где левый текстовый блок это :

<div class="entry-horizontal entry-single-portfolio entry-horizontal--text entry-js-parallax is-visible is-sticky is-active" style="width: 600px; top: 93.5px; opacity: 1; height: 556px;">

И правый блок с фото.

<figure class="entry-horizontal js__image-data js__hcol js__lazy"...>

Вопрос:
Как реализовать такую идею, что бы при наведении курсора на левый блок, я мог прокручивать текст вертикально (вверх-вниз) колесом мышки, а при наведении на правый блок, прокручивая колесо мышки, уже листались фотографии в горизонтальном направлении при этом текстовый блок, при прокручивании фото, уходил на задний план и не мешал просмотру фото.
На уровне интуиции понимаю, что эту идею способен решить JS, но как именно не могу понять... Через functions.php это возможно?
Подскажите пожалуйста, как реализовать мою идею.

Answer 1

[Артем Золин]

Чтобы добавился скролл-бар для блока, достаточно указать свойство overflow-x (горизонтально) или overflow-y (вертикально) со значением auto или scroll. Свойство scroll добавляет полосу прокрутки всегда, а auto - только если содержимого больше, чем размер контейнера

.container
	overflow-x: auto
	width: 480px
	&__inner
		min-width: 600px

По умолчанию, в большинстве браузеров вертикальный скролл срабатывает при прокручивании колеса мышки, а горизонтальный с зажатой клавишей Shift. Это поведение можно переопределить на js, вот 10 примеров реализации с ссылками на codepen