Javascript: Scroll from One Div to the Other When Scrolling

Javascript: scroll from one div to the other when scrolling?

scrollTo is a class to add to the divs you need to scroll to:

<div id="black_hole" class="scrollTo">

</div>
<div id="space_od" class="scrollTo">

</div>

Js

var scrolling = false;
var currentPos = 0;

function scrollUp(){
if(!scrolling && currentPos > 0 ){
scrolling=true;
currentPos --;
var scrollToElement = $('.scrollTo')[currentPos];

$('html, body').animate({
scrollTop: $(scrollToElement).offset().top
}, 500, function(){
scrolling = false;
});
}
}

function scrollDown(){
if(!scrolling && currentPos < $('.scrollTo').length-1 ){
scrolling=true;
currentPos ++;
var scrollToElement = $('.scrollTo')[currentPos];

$('html, body').animate({
scrollTop: $(scrollToElement).offset().top
}, 500,function(){
scrolling = false;
});
}
}

$(document).ready(function() {

// Get the current position on load

for( var i = 0; i < $('.scrollTo').length; i++){
var elm = $('.scrollTo')[i];

if( $(document).scrollTop() >= $(elm).offset().top ){
currentPos = i;
}
}

$(document).bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
scrollDown();
}else {
scrollUp();
}
return false;
});

$(document).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
scrollDown();
}else {
scrollUp();
}
return false;
});
});

Is there a way that a scrolling div can trigger another div to scroll using jQuery?

              let target = $("#current-B")[0];  $("#current-A").scroll(function() {    target.scrollTop = this.scrollTop;  });
section {  display: flex;  justify-content: space-between;}.scroll-box {  width: 200px;  height: 200px;  overflow-y: scroll;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><section><div class="scroll-box" id="current-A">   <p>item</p>  <p>item</p>  <p>item</p>  <p>item</p>  <p>item</p>  <p>item</p>  <p>item</p>  <p>item</p>  <p>item</p>  <p>item</p>  <p>item</p>  <p>item</p></div>
<div class="scroll-box" id="current-B"> <p>item item item item item item item</p> <p>item</p> <p>item</p> <p>item</p> <p>item</p> <p>item</p> <p>item</p> <p>item</p> <p>item</p> <p>item</p> <p>item</p> <p>item</p></div><section>

Scroll div next to other divs

You can add a scroll to the products area like this

.product-container {
height: 100vh; /* limit it to the size of your window */
overflow: auto; /* add scroll when necessary */
}

See the example here:
https://codepen.io/oriadam/pen/BrWqNw

Move Div element from one to another when page scrolled

You can use the .each() jQuery method to go through all the <div class="Test"> elements and then use .appendTo() to move each of them and all of their contents to some other element.

I also corrected <div class="product-price">Price Here</li> to this <div class="product-price">Price Here</div>.

Here is the code:

Note: I purposefully gave the bodya height of 2000px so we can test here (run the snippet).

$(document).scroll(function(){  if($(window).width() >= 480)  {     var y = $(this).scrollTop();     var div;       if (y > 600)     {       // for each element with class Test       $('div.Test').each(function()       {         $(this).appendTo('#Top'); // move the element and contents to #top       });           $('#Top').fadeIn();     }      else      {       $('div.Test').each(function()       {         $(this).appendTo('body');    // move to body       });           $('#Top').fadeOut();     }  }});
body{  height:2000px;}
#Top { display: block; position: fixed; top: 0; left: 0; width: 100%; border-bottom: 2px solid #f2f2f2; border-radius: 0; background-color: rgb(255, 255, 255); z-index: 9999; padding: 15px;}
<!DOCTYPE html><html><head><title>Title of the document</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></head>
<body> <div id="Top"></div>
<div class="Test"> <h1 class="heading-title">Title Here</h1> <div class="product-price">Price Here</div> <div class="cart-container"> <input type="button" id="button-cart" class="button" value="Add to Cart" /> </div></div></body>
</html>

On div scroll activate another div's scroll

It sounds like you want to respond to a scroll on one div by scrolling another.

You've already determined how to hook the scroll event. To set the scroll position of an element (the other div), you set the element's scrollTop and scrollLeft values (which are in pixels). If you want two divs to scroll in near-unison, for instance, you'd assign the source div's scrollTop and scrollLeft to the target div.

Example: Live Copy | Source

Relevant JavaScript:

(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();

or alternately (source):

(function() {
var target = $("#target")[0]; // <== Getting raw element
$("#source").scroll(function() {
target.scrollTop = this.scrollTop;
target.scrollLeft = this.scrollLeft;
});
})();

Full page:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>Scroll Example</title>
<style>
.scroll-example {
display: inline-block;
width: 40%;
border: 1px solid black;
margin-right: 20px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<p>Scroll the left div, watch the right one.</p>
<div id="source" class="scroll-example">
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
</div>
<div id="target" class="scroll-example">
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
</div>
<script>
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
</script>
</body>
</html>

In React, how to divert the scrolling to another element?

Doing this in React is fairly straightforward. Here is a functional component I created that is working as desired:

import React from "react";
import { useEffect, useRef, useState } from "react";
import "./Content.css";

const Content = (props) => {

const [contentHover, setContentHover] = useState(false);
const contentRef = useRef(null);

useEffect(() => {

const handleScrolling = (event) => {
if(contentRef !== null) {
if(contentHover === false) {
contentRef.current.scrollTop += event.deltaY;
}
}
}

window.addEventListener("wheel", handleScrolling);

return () => {
window.removeEventListener("wheel", handleScrolling);
}
})

return (
<div
className="content"
ref={contentRef}
onMouseEnter={ () => { setContentHover(true) }}
onMouseLeave={ () => { setContentHover(false) }}
>
{/* YOUR LIST OF CONTENT OR WHATEVER */}
</div>
)
}

export default Content;

Explanation

There are three things that make this solution work.

First, I used useRef to get access to the element that I want to scroll. In my example, this is the div with the class content. In your case it will be your middle div. This is important because doing this gives access to the element's scrollTop property. Using scrollTop we can set the position of the element's scroll bar.

Second, I added state called contentHover using useState. I toggle its value between true and false using the onMouseEnter and onMouseLeve event handlers on div I want to scroll. When the mouse enters my div contentHover becomes true. When it leaves it becomes false. This is important because we don't want to double scroll the element i.e. make it scroll twice as fast. We will check if contentHover is false, meaning the mouse is not in the element we want to scroll, before applying our custom scroll function.

Finally, the useEffect hook. I added an event listener for the wheel event. When the wheel event is fired, the event object passed to the handleScrolling function contains a deltaY property. Inside handleScrolling I add deltaY to the ref element's scrollTop property to get a similar result as scrolling normally. Finally, I remove the event listener in useEffect's clean up function.

In summary, we aren't necessarily "diverting" scrolling to another element. Instead, we listen for the wheel event, keep a reference to the element we want to scroll, and then update that element's scrollTop whenever the event is fired.

Hope this helped you in some way!

How to scroll a scrollable div when scrolled on other, non-scrollable div?

You're trying to get the deltaX property, and what you need for vertical scrolling is the deltaY one.

document.getElementById('green').addEventListener('wheel', function(e){
e.preventDefault();
document.getElementById('yellow').scrollTop += e.deltaY * 10;
});


Related Topics



Leave a reply



Submit