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 body
a 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
Javascript: Hiding and Showing Div Tag with a Toggle Button
Changing the Default Font Family in Tinymce
Determine Maximum Possible Div Height
Why Does Queryselector('Div Span') Match Even Though Queryselector('Div') Does Not
Style a D3 Element with Jquery and CSS
Kendo Chart Legend:Label at Left, Color at Right
Something Similar to Treegrid in Jqgrid
Export SASS/Scss Variables to JavaScript Without Exporting Them to CSS
How to Select Nth Element of the Same Type
How to Get the Font Size of an Element as It Was Set by CSS
How to Detect MAC Os Inverted Color Mode in JavaScript/Css
Vanilla JavaScript: Resize Font-Awesome to Fit Container
How to Customize Ant.Design Styles
Vue Transition Not Triggering on Button Click
How to Display Selected Image Without Sending Data to Server