Make Gif file play when user scrolls over and and stop afterwards

Make Gif file play when user scrolls over and and stop afterwards - javascript

I found this while browsing and this plays and stops gifts on hover:
http://docs.embed.ly/docs/tutorial-play-and-stop-gifs
I would like to maintain this functionality but by playing only once, when user scrolls over that section. I believe jQuery waypoints can be combined with this to achieve this, but my JS expertise fails to combine the two.
jQuery Waypoints
https://github.com/imakewebthings/waypoints
I believe an example HTML structure for this to start out would be something like this:
<div class="gifs row small-up-4">
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
</div>
.gifs a {
position: relative;
display: block;
}
.gif-preload {
display: none;
}
.gif-loading {
position: absolute;
width: 40px;
height: 40px;
font-size: 40px;
color: #fff;
top: 0;
left: 0;
}
$.embedly.defaults.key = '1d5c48f7edc34c54bdae4c37b681ea2b';
$('.gifs a').embedly({
display: function(obj) {
if (obj.type === 'photo') {
var $this = $(this);
// Create the static image src with Embedly Display.
var src = $.embedly.display.display(obj.url, {
query: {
animate: false
}
});
// Add static gif placeholder to the parent
$this.html('<img class="gif-holder" src="' + src + '" />');
// Start preloading the actually gif.
$this.append('<img class="gif-preload" src="' + obj.url + '" />');
// Create a promise so we can keep track of state.
$this.data('promise', $.Deferred());
// Get the element we added.
var elem = $this.find('.gif-preload').get(0);
// If the image is not in cache then onload will fire when it is.
elem.onload = function() {
$this.data('promise').resolve();
};
// If the image is already in the browsers cache call the handler.
if (elem.complete) {
$this.data('promise').resolve();
}
// Set the static gif url so we can use it later.
$(this).data('static_url', src);
} else {
// remove li if it's not an image.
$(this).parent().remove();
}
}
}).on('mouseenter', function() {
var $this = $(this);
// Set the hover state to true so that the load function knows to run.
$this.data('hover', true);
// Create a function to load the gif into the image.
var load = function() {
if ($this.data('hover') === true) {
// Remove the loading image if there is one
$this.find('.gif-loading').remove();
// Swap out the static src for the actually gif.
$this.find('img.gif-holder').attr('src', $this.data('embedly').url);
}
};
// Add the load function to the done callback. If it's already resolved
// this will fire immediately.
$this.data('promise').done(load);
// Add a spinner if it's not going to play right away.
if ($this.data('promise').state() === 'pending') {
// Add a loading spinner.
$this.append('<i class="gif-loading fa fa-spinner fa fa-spin"></i>');
// we need to center it over the image.
$this.find('.gif-loading').css({
top: $this.height() / 2 - 20,
left: $this.width() / 2 - 20
});
}
}).on('mouseleave', function() {
var $this = $(this);
// Make sure the load function knows we are no longer in a hover state.
$this.data('hover', false);
// Remove the spiner if it's there.
$this.find('.gif-loading').remove();
// Set the src to the static url.
$this.find('img.gif-holder').attr('src', $(this).data('static_url'));
});

This is not a perfect answer, but it will guide you a bit on how to implement.
Solution: everytime you scroll, check GIFS in screen an play them and stop those who aren't in screen.
1) everytime you scroll...
Simply using
$(document).scroll(onScroll);
onScroll function is gonna be called everytime you scroll.
2) check GIFS in screen an play them and stop those who aren't in screen
To know when a HTML element is in the screen, you can head to "Check if element is visible after scrolling" question.
So for example, based on this answer we could use:
/**
* Is element within visible region of a scrollable container
* #param {HTMLElement} el - element to test
* #returns {boolean} true if within visible region, otherwise false
*/
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
}
Final Solution
Combining your code, with the above, you can use this:
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
}
function animateGifsInScreen() {
$('.gifs a').each(function(index, el) {
if(isScrolledIntoView(el)) {
$(el).trigger('mouseenter');
} else {
$(el).trigger('mouseleave');
}
});
}
$(document).scroll(animateGifsInScreen);
What I'm doing: every time you scroll, I iterate over all gifs and play/stop them depending if they are on screen or not. For play/stop, I just trigger mouseenter/mouseleave respectively.
This may not be the ideal solution for your case but I'm pretty sure it will guide you to the correct answer.
There is a sample: https://jsfiddle.net/e8av59g2/ (it has a bug, you have to scroll at least once to made it work hehe).

Related

jQuery/DOM does not update viewport after changing sizes

In a DIV I have inserted images that I always want to display in 60% width of the original size of the image file (so that the images are on the same scale). For this I use the following jQuery-Script:
var cont_slider_ori_width;
var cont_slider_ori_height;
$('.img-drawing').each(function(i) {
var img = $(this);
$("<img>").attr("src", $(img).attr("src")).load(function() {
cont_slider_ori_width = this.width; // to get the original width of the image-file
cont_slider_ori_height = this.height; // to get the original height of the image-file
});
img.width(cont_slider_ori_width * 0.6);
// alert($(this).attr('src')); // If I avtivate this alert command, the size-changes work as it should ...
});
The HTML-Markup:
<div class="cont-slider-item-img-wrapper">
<div class="cont-slider-item-drw">
<img class="img-drawing" src="image1.png" alt="" width="1042" height="412">
</div>
<div class="cont-slider-item-drw">
<img class="img-drawing" src="image2.png" alt="" width="1042" height="411">
</div>
</div>
SCSS:
.cont-slider-item-img-wrapper {
display: flex;
justify-content: center;
.cont-slider-item-drw {
img {
width: auto;
height: auto;
}
}
}
But unfortunately this does not work (the size is not changed). It's strange that when I activate the 'alert' command, the redraw for the respective elements works as expected after each confirmation of the alarm box.
What did I do wrong? Thanks in advance for any help!!

With the friendly help of Chris G (see comments above) I was able to solve the problem. This is the jQuery/Javascript code, which is working now:
var cont_slider_ori_width;
var cont_slider_ori_height;
$('.img-drawing').each(function(i) {
cont_slider_ori_width = $(this).get()[0].naturalWidth;
$(this).width(cont_slider_ori_width * 0.6);
});

After hovering on images at the top of a webpage I want to specific div and hide other div based on the image hover

First, all three line of text will visible. Those are in different div. When I hover on IMAGE 1, only the first div should visible and other two should be hidden.
Like this, If I hover on IMAGE 3, only the third div text or 3rd line should visible and other line should hide.
Can you please sugget me how to achive that? Or can you give me a working example or code please? I tried using different way but failed.
Please check the html code in jsfiddle.
https://jsfiddle.net/mdykabir/ex67pfs1/2/
<div class="images">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/1.png">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/2.png">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/3.png">
</div>
<div class="infoArea">
<div id="infOne">
Show this div if hover on image 1.
</div>
<div id="infTwo">
Show this div if hover on image 2.
</div>
<div id="infThree">
Show this div if hover on image 3.
</div>
<div>

You add an event handler for mouseover/mouseout on the images, like this, and then toggle a class which hides/shows the div
window.addEventListener('load', function() {
var images = document.querySelectorAll('.images > img');
var divs = document.querySelectorAll('.infoArea > div');
for (i = 0; i < images.length; i++) {
(function(i){
images[i].addEventListener('mouseover', function(e) {
document.querySelector('.infoArea').classList.toggle('hide');
divs[i].classList.toggle('show');
})
images[i].addEventListener('mouseout', function(e) {
document.querySelector('.infoArea').classList.toggle('hide');
divs[i].classList.toggle('show');
})
})(i);
}
})
.infoArea.hide div {
display: none;
}
.infoArea > div.show {
display: block;
}
<div class="images">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/1.png">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/2.png">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/3.png">
</div>
<div class="infoArea">
<div id="infOne">
Show this div if hover on image 1.
</div>
<div id="infTwo">
Show this div if hover on image 2.
</div>
<div id="infThree">
Show this div if hover on image 3.
</div>
<div>
With a small markup change you don't even need script, just CSS hover
.images {
display: inline-block;
}
.images:hover ~ .infoArea > div {
display: none;
}
.images.imgOne:hover ~ .infoArea #infOne,
.images.imgTwo:hover ~ .infoArea #infTwo,
.images.imgThree:hover ~ .infoArea #infThree {
display: block;
}
<div class="images imgOne">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/1.png">
</div>
<div class="images imgTwo">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/2.png">
</div>
<div class="images imgThree">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/3.png">
</div>
<div class="infoArea">
<div id="infOne">
Show this div if hover on image 1.
</div>
<div id="infTwo">
Show this div if hover on image 2.
</div>
<div id="infThree">
Show this div if hover on image 3.
</div>
<div>
Based on a comment, here is a sample how to toggle on click, with persistent result
window.addEventListener('load', function() {
var images = document.querySelectorAll('.images > img');
var divs = document.querySelectorAll('.infoArea > div');
for (i = 0; i < images.length; i++) {
(function(i,old){
images[i].addEventListener('click', function(e) {
old = document.querySelector('.infoArea .show');
if (old) {
old.classList.toggle('show');
}
if (old != divs[i]) {
divs[i].classList.toggle('show');
}
})
})(i);
}
})
.infoArea div {
display: none;
}
.infoArea > div.show {
display: block;
}
<div class="images">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/1.png">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/2.png">
<img src="http://www.mykabir.info/wp-content/uploads/2017/01/3.png">
</div>
<div class="infoArea">
<div id="infOne">
Show this div if hover on image 1.
</div>
<div id="infTwo">
Show this div if hover on image 2.
</div>
<div id="infThree">
Show this div if hover on image 3.
</div>
<div>

You can use the mouseover and mouseout DOM events.
Here's a minimal example that accomplishes what you want with your example:
function showOnHover(args) {
var trigger = args.trigger;
var target = args.target;
trigger.addEventListener('mouseover', function(e) {
target.style.display = 'block';
})
trigger.addEventListener('mouseleave', function(e) {
target.style.display = 'none';
})
}
var images = document.querySelectorAll('.images img');
var toShow = document.querySelectorAll('.infoArea div');
var triggersAndTargets = Array.prototype.map.call(images, function (img, i) {
return { trigger: img, target: toShow[i] };
});
triggersAndTargets.forEach(showOnHover);
Try it here: https://jsfiddle.net/ex67pfs1/16/
And for an ES2015 version: https://jsfiddle.net/ex67pfs1/18/
Checkout this previous SO question for a jQuery solution.

This is how you do this in plain JS, I would stay away from CSS solutions if you target non sibling elements. If you target the element or a sibling, then do it with CSS, otherwise, there is now ay around JS.
This JS code can be done bit better, I will pack all into one function, but adding the listeners is a must.
var pic1 = document.getElementById('first');
var pic2 = document.getElementById('sec');
var pic3 = document.getElementById('thi');
pic1.addEventListener('mouseenter', function(){
var div1 = document.getElementById('infOne');
div1.style.opacity=1;
});
pic1.addEventListener('mouseout', function(){
var div1 = document.getElementById('infOne');
div1.style.opacity=0;
});
Check it out here, I changed some css as well.
https://jsfiddle.net/ex67pfs1/15/

Temporarily disable scroll at position/element with JS

I'm trying to find a way to lock the scroll at at a specified height or element for a certain amount of scrolls.
So in this plnkr I want it to stop on the second slide for 2-3 scrolls, and then proceed.
http://plnkr.co/edit/BAlFMLBhzVaqWuwhGCu8?p=preview
<div class="slide s1">S.O. made me include some code with plnkr link</div>
<div class="slide s2">Title 2</div>
<div class="slide s3">Title 3</div>
I've tried the following:
How to disable scrolling temporarily?
But if the user scrolls fast enough, they can scroll past the title.
I imagine this is because the UI thread is busy, and then when the JS finally kicks in, the title in the slide is out of view.
A good working example of what I'm looking for is here (on the second slide): http://journey.lifeofpimovie.com/
How does one achieve this effect?

I think link you have added is using some personal javascript plugins , it doesn't disable scrolling temporarily . I'm not familiar with these plugins but you can search for scrolling webpages plugins like this one : http://alvarotrigo.com/fullPage/
it has some Examples like this one and some others you can try .

Try
var $w = $(window);
var $slides = $('.slide');
$.fx.interval = -100;
var scrollTiles = function scrollTiles(e) {
var el = $slides.filter(function (i, el) {
return el.getBoundingClientRect().bottom >
parseInt($(el).css("height")) + 10
}),
// select second tile
tileId = el.prev().is($slides)
? el.prev().index()
: $slides.eq(-1).index();
// do stuff at second tile
if (tileId === 2) {
$slides.not(":eq(" + (tileId - 1) + ")")
.hide(0, function () {
$w.off("scroll.tiles");
$(this).queue("tiles", function () {
$(this).show(0)
})
// delay scroll three seconds
}).delay(3000)
.dequeue("tiles")
.promise()
.done(function (elems) {
// after three second delay ,
// scroll to third tile
$("body").animate({
scrollTop: elems.eq(-1).offset().top
}, 500, "linear", function () {
// prevent delay at second tile
// until after scroll to first tile from third tile ,
// reset `scroll.tiles` event
$w.on("scroll.t", function (e) {
if (elems.eq(0)[0].getBoundingClientRect().bottom >
elems.eq(0).height()) {
$(this).off("scroll.t")
.on("scroll.tiles", scrollTiles)
}
})
})
})
}
};
$w.on("scroll.tiles", scrollTiles);
/* Styles go here */
html,
body {
height: 100%;
}
.slide {
height: 100%;
}
.s1 {
background: red;
}
.s2 {
background: orange;
}
.s3 {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body>
<div class="slide s1">Title 1</div>
<div class="slide s2">Title 2</div>
<div class="slide s3">Title 3</div>
</body>

jQuery - Get length and trigger click in increments based on length

Sorry if I'm completely missing with the title, I'm not entirely sure how to word what it is I'm trying to achieve. Any help would be great!!
Over the past few months in my free time I've been setting myself tasks to help myself understand and learn javascript / jQuery. So far all is going well but I've hit a bit of a bump in the road!
Essentially what I've created is a pretty simple set of tabbed content with a changing banner. When you click a tab, the relevant banner fades in and the previous banner fades out
Here's a fiddle: http://jsfiddle.net/unn9s4yf/
So what I'd like to do and where I'm kind of stuck is I'd like the banners to automatically "rotate", by fading in and out in the tabbed order every 10 seconds or so.
So kind of like a trigger click, but I feel as if that'd be the wrong way to go?
$('.thumb' + idAttr).trigger("click");
With a timeout attached? I'm not sure? I'm also not sure how to increment it each time so if this was the chosen method, how would it start at thumb 1, then click 2, 3, 4 & so on?
I've got the number of thumbs inside the div using
var thumbCount = $('#thumbs a').length;
Which returns 15 which is correct. So I guess it'd be something like when idAttr = .length start over from 1 again?
I'd also like to be able to pause the "auto click" function when I hover overthe main banner or thumbnails, I don't know if this is achievable though?
I know I'm asking a lot here.... At least I think I am. But any help or guidance on any part of this would be massively appreciated.
Thank you for your time!

I forked your jsfiddle and tried to do what you asked.
http://jsfiddle.net/OxyDesign/2g5Lav12/
It changes every 3 seconds, comes back to first thumb after the last thumb, stops on mouseenter & plays on mouseleave (on thumbs & banners), and stops on click & plays on second click on the same thumb.
HTML
<div id="container">
<div id="thumbs">
<a class="thumb active"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
<a class="thumb"></a>
</div>
<div id="banner">
<div class="banner active"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
</div>
</div>
CSS
#container {width: 960px; margin: 0 auto;}
div,
a {float: left; display: block;}
#thumbs {width: 600px;}
.thumb {width: 110px; height: 156px; margin: 0 10px 10px 0; cursor: pointer;}
.thumb:hover,
.thumb.active,
.thumb.clicked {opacity: 0.5;}
.thumb:nth-child(even) {background: #ccee44;}
.thumb:nth-child(odd) {background: #ff33dd;}
#banner {width: 360px;}
.banner {width: 360px; height: 488px; position: absolute; display: none;}
.banner.active {display: block;}
.banner:nth-child(even) {background: #ccee44;}
.banner:nth-child(odd) {background: #ff33dd;}
JS
$(document).ready(function() {
var thumbs = $('.thumb'),
firstThumb = thumbs.eq(0),
banners = $('.banner'),
all = thumbs.add(banners),
duration = 3000,
rotating = false,
intervalRotate;
function setAutoRotate(){
intervalRotate = setInterval(autoRotate,duration);
rotating = true;
}
function stopAutoRotate(){
clearInterval(intervalRotate);
rotating = false;
}
function autoRotate(){
var nextThumb = thumbs.filter('.active').next();
if(!nextThumb.length) nextThumb = firstThumb;
rotate(nextThumb);
}
function rotate(activeThumb){
thumbs.removeClass('active');
activeThumb.addClass('active');
banners.removeClass('active').eq(thumbs.index(activeThumb)).addClass('active');
}
thumbs.on('click',function(e){
e.preventDefault();
var thumb = $(this);
if(thumb.hasClass('clicked')){
thumb.removeClass('clicked');
}else{
stopAutoRotate();
thumbs.removeClass('clicked');
thumb.addClass('clicked');
rotate(thumb);
}
});
all.on('mouseenter',function(){
if(rotating) stopAutoRotate();
});
all.on('mouseleave',function(){
if(!thumbs.filter('.clicked').length) setAutoRotate();
});
setAutoRotate();
});
Is it the behaviour you wanted ?

Triggering a click with a timeout should work fine. You could even do it recursively if you never want it to end. Also, you can set a variable to decide when to stop the rotation
$(function() {
$('.thumb').click(function(event, isAutoClick){
//Is Not automatic click, set false
if (!isAutoClick) isRotationActive = false;
//Other Click Code
});
//If hover over banner, stop rotation
$("#banner").on("mouseover", function() {
isRotationActive = false;
});
rotate($(".thumb"), 0);
});
var isRotationActive = true;
function rotate($clickables, currentIndex) {
//Make sure currentIndex is valid
currentIndex = currentIndex % $clickables.length;
//Trigger current click
$clickables.eq(currentIndex).trigger("click", [true]); //Passes [true] for isAutoClick
//Call again in 1 second with the next index
setTimeout(function() {
isRotationActive && rotate($clickables, currentIndex + 1)
}, 1000);
}
Updated Fiddle here: http://jsfiddle.net/unn9s4yf/3/

An Additional Solution:
var thumbs = $('.thumb');
var currentThumb = 0;
var changingStopped = false;
var changeBanner = function() {
console.log(thumbs.eq(currentThumb));
thumbs.eq(currentThumb).click();
currentThumb >= thumbCount - 1 ? currentThumb = 0 : currentThumb++;
setTimeout(function() {
checkIfChange();
}, 1000);
}
// triggers 'changeBanner()' if the user isn't currently stopping it.
var checkIfChange = function() {
if (!changingStopped)
{
changeBanner();
}
}
// makes the rotation stop
$('.thumb').mouseenter(function() {
changingStopped = true;
$(this).trigger('click'); // Assuming you want the hovered-over thumb to be displayed in the banner.
currentThumb = $(this).index() + 1; // Additional Option to make the rotation begin again from the current thumb.
});
// makes the rotation start again
$('.thumb').mouseleave(function() {
changingStopped = false;
checkIfChange();
});
checkIfChange();
See JSFiddle. Cheers!

How to scroll to an element inside a div?

I have a scrolled div and I want to have an event when I click on it, it will force this div to scroll to view an element inside.
I wrote its JavasSript like this:
document.getElementById(chr).scrollIntoView(true);
but this scrolls all the page while scrolling the div itself.
How to fix that?
I want to say it like this:
MyContainerDiv.getElementById(chr).scrollIntoView(true);

You need to get the top offset of the element you'd like to scroll into view, relative to its parent (the scrolling div container):
var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;
The variable topPos is now set to the distance between the top of the scrolling div and the element you wish to have visible (in pixels).
Now we tell the div to scroll to that position using scrollTop:
document.getElementById('scrolling_div').scrollTop = topPos;
If you're using the prototype JS framework, you'd do the same thing like this:
var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];
Again, this will scroll the div so that the element you wish to see is exactly at the top (or if that's not possible, scrolled as far down as it can so it's visible).

You would have to find the position of the element in the DIV you want to scroll to, and set the scrollTop property.
divElem.scrollTop = 0;
Update:
Sample code to move up or down
function move_up() {
document.getElementById('divElem').scrollTop += 10;
}
function move_down() {
document.getElementById('divElem').scrollTop -= 10;
}

Method 1 - Smooth scrolling to an element inside an element
var box = document.querySelector('.box'),
targetElm = document.querySelector('.boxChild'); // <-- Scroll to here within ".box"
document.querySelector('button').addEventListener('click', function(){
scrollToElm( box, targetElm , 600 );
});
/////////////
function scrollToElm(container, elm, duration){
var pos = getRelativePos(elm);
scrollTo( container, pos.top , 2); // duration in seconds
}
function getRelativePos(elm){
var pPos = elm.parentNode.getBoundingClientRect(), // parent pos
cPos = elm.getBoundingClientRect(), // target pos
pos = {};
pos.top = cPos.top - pPos.top + elm.parentNode.scrollTop,
pos.right = cPos.right - pPos.right,
pos.bottom = cPos.bottom - pPos.bottom,
pos.left = cPos.left - pPos.left;
return pos;
}
function scrollTo(element, to, duration, onDone) {
var start = element.scrollTop,
change = to - start,
startTime = performance.now(),
val, now, elapsed, t;
function animateScroll(){
now = performance.now();
elapsed = (now - startTime)/1000;
t = (elapsed/duration);
element.scrollTop = start + change * easeInOutQuad(t);
if( t < 1 )
window.requestAnimationFrame(animateScroll);
else
onDone && onDone();
};
animateScroll();
}
function easeInOutQuad(t){ return t<.5 ? 2*t*t : -1+(4-2*t)*t };
.box{ width:80%; border:2px dashed; height:180px; overflow:auto; }
.boxChild{
margin:600px 0 300px;
width: 40px;
height:40px;
background:green;
}
<button>Scroll to element</button>
<div class='box'>
<div class='boxChild'></div>
</div>
Method 2 - Using Element.scrollIntoView:
Note that browser support isn't great for this one
var targetElm = document.querySelector('.boxChild'), // reference to scroll target
button = document.querySelector('button'); // button that triggers the scroll
// bind "click" event to a button
button.addEventListener('click', function(){
targetElm.scrollIntoView()
})
.box {
width: 80%;
border: 2px dashed;
height: 180px;
overflow: auto;
scroll-behavior: smooth; /* <-- for smooth scroll */
}
.boxChild {
margin: 600px 0 300px;
width: 40px;
height: 40px;
background: green;
}
<button>Scroll to element</button>
<div class='box'>
<div class='boxChild'></div>
</div>
Method 3 - Using CSS scroll-behavior:
.box {
width: 80%;
border: 2px dashed;
height: 180px;
overflow-y: scroll;
scroll-behavior: smooth; /* <--- */
}
#boxChild {
margin: 600px 0 300px;
width: 40px;
height: 40px;
background: green;
}
<a href='#boxChild'>Scroll to element</a>
<div class='box'>
<div id='boxChild'></div>
</div>

Native JS, Cross Browser, Smooth Scroll (Update 2020)
Setting ScrollTop does give the desired result but the scroll is very abrupt. Using jquery to have smooth scroll was not an option. So here's a native way to get the job done that supports all major browsers. Reference - caniuse
// get the "Div" inside which you wish to scroll (i.e. the container element)
const El = document.getElementById('xyz');
// Lets say you wish to scroll by 100px,
El.scrollTo({top: 100, behavior: 'smooth'});
// If you wish to scroll until the end of the container
El.scrollTo({top: El.scrollHeight, behavior: 'smooth'});
That's it!
And here's a working snippet for the doubtful -
document.getElementById('btn').addEventListener('click', e => {
e.preventDefault();
// smooth scroll
document.getElementById('container').scrollTo({top: 175, behavior: 'smooth'});
});
/* just some styling for you to ignore */
.scrollContainer {
overflow-y: auto;
max-height: 100px;
position: relative;
border: 1px solid red;
width: 120px;
}
body {
padding: 10px;
}
.box {
margin: 5px;
background-color: yellow;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
#goose {
background-color: lime;
}
<!-- Dummy html to be ignored -->
<div id="container" class="scrollContainer">
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div id="goose" class="box">goose</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
</div>
<button id="btn">goose</button>
Update: As you can perceive in the comments, it seems that Element.scrollTo() is not supported in IE11. So if you don't care about IE11 (you really shouldn't, Microsoft is retiring IE11 in June 2022), feel free to use this in all your projects. Note that support exists for Edge! So you're not really leaving your Edge/Windows users behind ;)
Reference

To scroll an element into view of a div, only if needed, you can use this scrollIfNeeded function:
function scrollIfNeeded(element, container) {
if (element.offsetTop < container.scrollTop) {
container.scrollTop = element.offsetTop;
} else {
const offsetBottom = element.offsetTop + element.offsetHeight;
const scrollBottom = container.scrollTop + container.offsetHeight;
if (offsetBottom > scrollBottom) {
container.scrollTop = offsetBottom - container.offsetHeight;
}
}
}
document.getElementById('btn').addEventListener('click', ev => {
ev.preventDefault();
scrollIfNeeded(document.getElementById('goose'), document.getElementById('container'));
});
.scrollContainer {
overflow-y: auto;
max-height: 100px;
position: relative;
border: 1px solid red;
width: 120px;
}
body {
padding: 10px;
}
.box {
margin: 5px;
background-color: yellow;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
#goose {
background-color: lime;
}
<div id="container" class="scrollContainer">
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div id="goose" class="box">goose</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
</div>
<button id="btn">scroll to goose</button>

Code should be:
var divElem = document.getElementById('scrolling_div');
var chElem = document.getElementById('element_within_div');
var topPos = divElem.offsetTop;
divElem.scrollTop = topPos - chElem.offsetTop;
You want to scroll the difference between child top position and div's top position.
Get access to child elements using:
var divElem = document.getElementById('scrolling_div');
var numChildren = divElem.childNodes.length;
and so on....

If you are using jQuery, you could scroll with an animation using the following:
$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});
The animation is optional: you could also take the scrollTop value calculated above and put it directly in the container's scrollTop property.

We can resolve this problem without using JQuery and other libs.
I wrote following code for this purpose:
You have similar structure ->
<div class="parent">
<div class="child-one">
</div>
<div class="child-two">
</div>
</div>
JS:
scrollToElement() {
var parentElement = document.querySelector('.parent');
var childElement = document.querySelector('.child-two');
parentElement.scrollTop = childElement.offsetTop - parentElement.offsetTop;
}
We can easily rewrite this method for passing parent and child as an arguments

Another example of using jQuery and animate.
var container = $('#container');
var element = $('#element');
container.animate({
scrollTop: container.scrollTop = container.scrollTop() + element.offset().top - container.offset().top
}, {
duration: 1000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function (e) {
console.log("animation completed");
}
});

None of other answer fixed my issue.
I played around with scrollIntoView arguments and managed to found a solution. Setting inline to start and block to nearest prevents parent element (or entire page) to scroll:
document.getElementById(chr).scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start'
});

There are two facts :
1) Component scrollIntoView is not supported by safari.
2) JS framework jQuery can do the job like this:
parent = 'some parent div has css position==="fixed"' || 'html, body';
$(parent).animate({scrollTop: $(child).offset().top}, duration)

Here's a simple pure JavaScript solution that works for a target Number (value for scrollTop), target DOM element, or some special String cases:
/**
* target - target to scroll to (DOM element, scrollTop Number, 'top', or 'bottom'
* containerEl - DOM element for the container with scrollbars
*/
var scrollToTarget = function(target, containerEl) {
// Moved up here for readability:
var isElement = target && target.nodeType === 1,
isNumber = Object.prototype.toString.call(target) === '[object Number]';
if (isElement) {
containerEl.scrollTop = target.offsetTop;
} else if (isNumber) {
containerEl.scrollTop = target;
} else if (target === 'bottom') {
containerEl.scrollTop = containerEl.scrollHeight - containerEl.offsetHeight;
} else if (target === 'top') {
containerEl.scrollTop = 0;
}
};
And here are some examples of usage:
// Scroll to the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget('top', scrollableDiv);
or
// Scroll to 200px from the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget(200, scrollableDiv);
or
// Scroll to targetElement
var scrollableDiv = document.getElementById('scrollable_div');
var targetElement= document.getElementById('target_element');
scrollToTarget(targetElement, scrollableDiv);

given you have a div element you need to scroll inside, try this piece of code
document.querySelector('div').scroll(x,y)
this works with me inside a div with a scroll, this should work with you in case you pointed the mouse over this element and then tried to scroll down or up. If it manually works, it should work too

User Animated Scrolling
Here's an example of how to programmatically scroll a <div> horizontally, without JQuery. To scroll vertically, you would replace JavaScript's writes to scrollLeft with scrollTop, instead.
JSFiddle
https://jsfiddle.net/fNPvf/38536/
HTML
<!-- Left Button. -->
<div style="float:left;">
<!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
<input type="button" value="«" style="height: 100px;" onmousedown="scroll('scroller',3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
<!-- <3 -->
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
<!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
<input type="button" value="»" style="height: 100px;" onmousedown="scroll('scroller',-3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
JavaScript
// Declare the Shared Timer.
var TIMER_SCROLL;
/**
Scroll function.
#param id Unique id of element to scroll.
#param d Amount of pixels to scroll per sleep.
#param del Size of the sleep (ms).*/
function scroll(id, d, del){
// Scroll the element.
document.getElementById(id).scrollLeft += d;
// Perform a delay before recursing this function again.
TIMER_SCROLL = setTimeout("scroll('"+id+"',"+d+", "+del+");", del);
}
Credit to Dux.
Auto Animated Scrolling
In addition, here are functions for scrolling a <div> fully to the left and right. The only thing we change here is we make a check to see if the full extension of the scroll has been utilised before making a recursive call to scroll again.
JSFiddle
https://jsfiddle.net/0nLc2fhh/1/
HTML
<!-- Left Button. -->
<div style="float:left;">
<!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
<input type="button" value="«" style="height: 100px;" onclick="scrollFullyLeft('scroller',3, 10);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
<!-- <3 -->
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
<!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
<input type="button" value="»" style="height: 100px;" onclick="scrollFullyRight('scroller',3, 10);"/>
</div>
JavaScript
// Declare the Shared Timer.
var TIMER_SCROLL;
/**
Scroll fully left function; completely scrolls a <div> to the left, as far as it will go.
#param id Unique id of element to scroll.
#param d Amount of pixels to scroll per sleep.
#param del Size of the sleep (ms).*/
function scrollFullyLeft(id, d, del){
// Fetch the element.
var el = document.getElementById(id);
// Scroll the element.
el.scrollLeft += d;
// Have we not finished scrolling yet?
if(el.scrollLeft < (el.scrollWidth - el.clientWidth)) {
TIMER_SCROLL = setTimeout("scrollFullyLeft('"+id+"',"+d+", "+del+");", del);
}
}
/**
Scroll fully right function; completely scrolls a <div> to the right, as far as it will go.
#param id Unique id of element to scroll.
#param d Amount of pixels to scroll per sleep.
#param del Size of the sleep (ms).*/
function scrollFullyRight(id, d, del){
// Fetch the element.
var el = document.getElementById(id);
// Scroll the element.
el.scrollLeft -= d;
// Have we not finished scrolling yet?
if(el.scrollLeft > 0) {
TIMER_SCROLL = setTimeout("scrollFullyRight('"+id+"',"+d+", "+del+");", del);
}
}

This is what has finally served me
/** Set parent scroll to show element
* #param element {object} The HTML object to show
* #param parent {object} The HTML object where the element is shown */
var scrollToView = function(element, parent) {
//Algorithm: Accumulate the height of the previous elements and add half the height of the parent
var offsetAccumulator = 0;
parent = $(parent);
parent.children().each(function() {
if(this == element) {
return false; //brake each loop
}
offsetAccumulator += $(this).innerHeight();
});
parent.scrollTop(offsetAccumulator - parent.innerHeight()/2);
}

I needed to scroll a dynamically loading element on a page so my solution was a little more involved.
This will work on static elements that are not lazy loading data and data being dynamically loaded.
const smoothScrollElement = async (selector: string, scrollBy = 12, prevCurrPos = 0) => {
const wait = (timeout: number) => new Promise(resolve => setTimeout(resolve, timeout));
const el = document.querySelector(selector) as HTMLElement;
let positionToScrollTo = el.scrollHeight;
let currentPosition = Math.floor(el.scrollTop) || 0;
let pageYOffset = (el.clientHeight + currentPosition);
if (positionToScrollTo == pageYOffset) {
await wait(1000);
}
if ((prevCurrPos > 0 && currentPosition <= prevCurrPos) !== true) {
setTimeout(async () => {
el.scrollBy(0, scrollBy);
await smoothScrollElement(selector, scrollBy, currentPosition);
}, scrollBy);
}
};

browser does scrolling automatically to an element that gets focus, so what you can also do it to wrap the element that you need to be scrolled to into <a>...</a> and then when you need scroll just set the focus on that a

Develop Reference

JavaScript is the programming language of the Web.

Make Gif file play when user scrolls over and and stop afterwards - javascript

Related

jQuery/DOM does not update viewport after changing sizes

After hovering on images at the top of a webpage I want to specific div and hide other div based on the image hover

Temporarily disable scroll at position/element with JS

jQuery - Get length and trigger click in increments based on length

How to scroll to an element inside a div?

Categories

Resources