Javascript/React onClick scroll set amount down/up - javascript

I got a problem figuring out how to make a button onClick scroll down for example 30px per click.
say i got two divs with icons like this
<div className="info-container">
<div className="scroll-icon-container" onClick={scrollUp(30)}>
<ScrollUpIcon />
</div>
<div className="scroll-icon-container" onClick={scrollDown(30)}>
<ScrollDownIcon />
</div>
<p>"Huge amount of text that will need scrolling"</p>
</div>
Then two functions like
scrollUp(number: amountToScroll){
//Scroll the "info-container" up amountToScroll pixels
}
scrollDown(number: amountToScroll){
//Scroll the "info-container" down amountToScroll pixels
}
All i could find so far is either in jquery or how to make it scroll to a specific element but i am looking for a set amount to scroll down in pixels % or whatever works.

First of all you can either define a variable or state for maintaining the scroll position.
Let us take state as scrollPosition and initialize it to 0.
Now in the scrollUp function:
scrollUp(amountToScroll){
this.setState({
scrollPosition : this.state.scrollPosition + amountToScroll
})
window.scrollTo(0, this.state.scrollPosition)
}
Now in scrollDown function:
scrollDown(amountToScroll){
this.setState({
scrollPosition : this.state.scrollPosition - amountToScroll
})
window.scrollTo(0, this.state.scrollPosition)
}

Use window.scrollBy( pixelsToScrollRight, pixelsToScrollDown ) method.
So instead of scrollUp() and scrollDown() methods you can have something like this:
scroll(number: amountToScroll){
//amount to scroll is negative to scroll up
window.scrollBy(0 , amountToScroll)
}
If you want to look at scrolling inside a div: How to scroll to an element inside a div?

Related

Making on-scroll style changes using vanilla js

I want remove .bg-light from nav element at 400px and more scrolls
<nav id="my-nav" class="bg-light navbar text-info"> change my background color</nav>
I know it's an easy task with jQuery but is it possible to do it with vanilla js?
Thanks for spending time on my question I will be glad to see opinion
First, we start by grabbing the "nav" element using the ID.
Then setting our Y-axis's offset.
Attach a listener to the window object.
On scroll, compare the current position to our desired offset.
const navBar = document.getElementById("my-nav");
const offset = 400;
window.addEventListener("scroll", () => {
if (window.scrollY >= offset){
navBar.classList.remove("bg-light")
} else {
navBar.classList.add("bg-light")
}
})
Yes, its possible with Vanilla JavaScript, use the "scroll" event handler to get the info. As the users moves through the site it will return the Y axis position in pixels. By using an if statement remove or add the bg-light class, like so:
let nav = document.getElementById("my-nav");
window.addEventListener("scroll", (e) => {
if(this.scrollY > 400){ nav.classList.remove('bg-light') }
else{
nav.classList.add('bg-light')
}
});
*{padding:5px}
html{height:3000px;font-size:20px}
.bg-light{background-color: #F8F8F8!important; color:black!important;}
.navbar{position:fixed;background-color:blue; color:white;}
<nav id="my-nav" class="bg-light navbar text-info"> Change my background color at scrollY 400px</nav>

Detecting end of scroll in a div

I have a dynamic website with many blog posts. I want to load just four posts at first and load another four when scrolled to end. I know how to handle it on the backend, but I am having problem on the frontend. I have set the height of html and body to 100%, due to which scroll events on the window didn't work. As a workaround, I decided to use a single div to detect the scroll. I added scroll event on the div, and it worked fine. But when I tried to detect the end of scroll on the div, the code executed at the beginning of the page load before performing any scrolls. The code I used is:
if (element.scrollHeight - element.scrollTop === element.clientHeight){
alert("End");
}
How do I make the alert to appear only after the div has been scrolled to the end instead at the begining?
You can use element.scrollTop + element.offsetHeight>= element.scrollHeight to detect scroll end.
Update:
Also adding a condition so that it won't fire when scrolling upwards.
For more on upward scroll condition,you can check this link.
const element = document.getElementById('element');
let lastScrollTop = 0;
element.onscroll = (e)=>{
if (element.scrollTop < lastScrollTop){
// upscroll
return;
}
lastScrollTop = element.scrollTop <= 0 ? 0 : element.scrollTop;
if (element.scrollTop + element.offsetHeight>= element.scrollHeight ){
console.log("End");
}
}
#element{
background:red;
max-height:300px;
overflow:scroll;
}
.item{
height:100px;
}
<div id="element">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
Answer for year 2023.
Now we have scrollend event.
Tested on chromium 108, firefox 109
Example:
const output = document.querySelector("p#output");
document.addEventListener("scrollend", (event) => {
output.innerHTML = `Document scrollend event fired!`;
});
According to mdn docs:
The scrollend event fires when the document view has completed scrolling.
Scrolling is considered completed when the scroll position has no more pending updates and
the user has completed their gesture.
Know more at mdn : Document: scrollend event
element.scrollTop + element.offsetHeight >= element.scrollTopMax
I mainly use this as a condition

two column equal height layout using bootstrap

I have two column layout, left side only one image column and right side content etc. right now both are same height if rotate screen then it is not equal height but i refresh page(rotate screen) then both column do have equal height. i am trying to equal height without refresh page at rotate screen.
$(function(){
$balancer = function() {
$('.main-box').each(function(){
if($('.cola',this).height()>$('.colb',this).height()){
$('.colb',this).height($('.cola',this).height())
} else {
$('.cola',this).height($('.colb',this).height())
}
});
}
$balancer();
$(window).load($balancer());
$(window).resize($balancer());
});
html
<div class="main-box">
<div class="cola"></div>
<div class="colb"></div>
</div>
You can hook into the DeviceOrientation change event.
window.addEventListener("deviceorientation", function (e) {
//DO stuff here.
}, false);
Which should trigger when you go from horizontal to vertical and back again.
your jquery selector seems wrong.
$('.main-box').each....
You need to select the inner divs not the wrapper.
$('.main-box > div').each....
if( $(this).height() > $(this).siblings().height() ) {
$(this).siblings().height( $(this).height() );
} else {
$(this).height( $(this).siblings().height() )
}
Possible duplicate of : How can I make Bootstrap columns all the same height?
And there is another link which can help you: http://getbootstrap.com.vn/examples/equal-height-columns/

JQUERY- refer to specific div with class as other divs inside the html page

In the fiddle you will see at the center of the page a DIV that contains text next to an img.
When I scroll down/up I need to effect with jquery/javascript only the div who's the closest to the navbar-below. all the divs as the same class so I effect them all-not what I need
For example:
what I am trying to achieve : when I scroll down,the closest div to the navbar(yellow bar) will be painted(the div) green,so if I scroll down and the navbar "collapse" with the div with will paint in green, and when he passes him and "disapper" it will go back to original color and the next div will paint in green. is it possible?
Here's the JS FIDDLE
When I referred to div I meant this section :
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">sddsadasasdsadLorem </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
EDIT:
UPDATED JSFIDDLE :
http://jsfiddle.net/nnkekjsy/3/
I added my jquery,as you can see it works only for the first one,and then stuck.. i need to "pass" it along the others div below him when the are getting to the same point. any ideas? :
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
if ( scrollVal > 55) {
$('#left_inside_center').css({'position':'fixed','top' :navHeight+'px'});
} else {
$('#left_inside_center').css({'position':'static','top':'auto'});
}
});
});
Have you tried use the first-of-type to select the top div, if i understand what your trying to do.
CSS3 selector :first-of-type with class name?
An other solution would be to check the position of the div and the nav bar and pick the closest one.
$(".left_side").each(function () {
//compare scroll with div
if(window.scrollTop() = $(this).position.top())
{
//do something
}
});
I know the position and the scroll won't be the same value but you can play with the condition to put some range.
Edit :
I think this is what you want. The navHeight and the height variable should be outside the window.scroll function as they never change :
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
var height = parseInt($(".right_side").css("height").split("px")[0]);
$(".left_side").css({'position':'static','top':'auto'});
$(".left_side").filter(function( ) {
return $(this).position().top - 10 < scrollVal && $(this).position().top + height > scrollVal;
}).css({'position':'fixed','top' :navHeight+'px'});
});
Working fiddle :
http://jsfiddle.net/nnkekjsy/6/

determine div position scrolltop

I've got a bunch of div width heights over 1000px under eachother. How can I determine a div position relative to the top of the window?
E.g.
<div>height:1000px</div>
<div>height:1000px</div>
<div>height:1000px</div>
<div class="this_div">height:1000px</div>
<div>height:1000px</div>
<div>height:1000px</div>
<div>height:1000px</div>
I'm trying something like this.
$(function(){
$(window).bind('scroll resize',function(e){
var scrolledY = $(window).scrollTop(),
scrolling = scrolledY-4900;
if(scrolledY > 4900){
$('div.this_div').css('background', 'red');
}
if(scrolledY > 5500)){
$('div.this_div').css('background', 'none');
}
});
});
As you can see, if you've scrolled 4900px it does something. Isn't it possible to do something when you've scrolled till the div, instead of determining at what px it is?
You'll need the .offset() function for this. It helps you determine the offset of your "this_div" for the scrolling method (instead of the 4900 value you're passing along).
JSFiddle.
Well, I guess;
console.log(parseFloat($("#myBlock").offset().top) + parseFloat($(document).scrollTop()));​

Categories