How to make active a block with text for scrolling with the mouse wheel on hover?

  • 0
    There is a piece of code:
    <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>

    It looks like a horizontal gallery, where the left text block is:
    <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;">

    And the right block with a photo.
    <figure class="entry-horizontal js__image-data js__hcol js__lazy"...>

    Question:
    How to implement such an idea that when I hover the cursor over the left block, I could scroll the text vertically (up and down) with the mouse wheel, and when hovering over the right block, scrolling the mouse wheel, the photos are already scrolling in the horizontal direction, while the text block, when scrolling through the photo, went into the background and did not interfere with the photo viewing.
    At the level of intuition, I understand that JS can solve this idea, but how exactly I can't understand ... Is it possible through functions.php?
    Please tell me how to implement my idea.
    JavaScript Vivian Clay, Aug 31, 2020

  • 1 Answers
  • 0
    To add a scroll bar to a block, just specify the overflow-x (horizontal) or overflow-y (vertical) property with the auto or scroll value. The scroll property always adds a scrollbar, and auto only adds if the content is larger than the size of the container.



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




    By default, in most browsers, vertical scrolling is triggered by scrolling the mouse wheel, and horizontal scrolling with the Shift key pressed. This behavior can be overridden in js, here is 10 examples with links to codepen
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!