JS Methods for Scrolling

This tutorial explains the three methods that we can use to control scrolling content on a webpage. scrollTo, scrollBy, and scrollIntoView are all available across all browsers to use for this purpose.
Sample Code GIST: gist.github.co...

[@Colstonewall]

Pure Gold, Steve! Thank you, Sir.

[@chaderenyore1748]

Thanks Man, I got what I wanted by looking at your code.
I won't recommend using the scrollIntoView as you can't set some margins, but using the scrollto gives you that flexibility, and the scroll behaviour is smooth by default

[@iwswordpress]

This is very handy! Thanks.

[@xl8134]

Quality content as always. Thank you!

[@irawo8142]

Great video

[@shubha.tshubha.t8997]

THUMBS UP

[@Banjer]

how can I get the percentage of the screen and change an element when I reach that percentage..for instance the 50% of the screen.

[@SteveGriffith-Prof3ssorSt3v3]

You probably want to use the Intersection Observer API to do that - th-cam.com/video/gQ8WggeHoJU/w-d-xo.html

[@vibekdutta6539]

I wanted a quick help from u, I have a DIV inside of which I have some LI elements and I have a scroll property for that DIV, so I want to scroll in the DIV with my keyboard arrow keys, u know the LI elements, I dont know how to write he logic and I needed some help, Thanks Sir

[@SteveGriffith-Prof3ssorSt3v3]

I assume that you have an OL or UL around the LI elements to keep the HTML valid.
Creating scrollable areas is VERY often a bad design decision and makes an interface harder for a user to use. Use the built-in scrolling from the browser. This already has the connection to the arrow keys built-in. By adding arrow key controls to other parts of the page you are breaking default behaviour and creating something that is inaccessible.
If you want some content to remain on the screen while the user scrolls then use position fixed or sticky on the thing you want to keep visible.

[@vibekdutta6539]

@@SteveGriffith-Prof3ssorSt3v3 I actually have a search bar , so for searching I was doing that, I am glad you told me that , Thanks!

[@rekhakaushik4292]

Nice

Nice video

[@ashishsondagar2812]

02:18 IMP concept

[@reshmagulati2218]

Hi, I have a table with n rows and a search bar. I want to scroll to the nth row when searched in the search bar. After the search is done, the nth row expands to show the details

[@SteveGriffith-Prof3ssorSt3v3]

developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
th-cam.com/video/HIWWBHB3xHY/w-d-xo.html

[@amircahyadi9219]

Nice ❤️ 👍

[@goodenough1223]

Hey Steve.. could we add some smoothness to the scrolling.?

[@SteveGriffith-Prof3ssorSt3v3]

th-cam.com/video/8HhMwEKNzCc/w-d-xo.html - like this?

[@nisarhassan7093]

Hi. Steve Thanks for the great video. I have a situation where there is a Testimonials section with a horizontal scroll bar and below are buttons that would change the scroll position for the testimonials container depending on which button is clicked to show the off-screen contents The user can use the scrollbar to view the off-screen contents but I want the scroll to work with the buttons as well.
How can I scroll the Tweets container like you showed how it works with the document? I tried the scrollTo, scrollBy methods inside of an event listener on the buttons but none of them seems to work. Thanks

[@nisarhassan7093]

I got it to work via using developer.mozilla.org/en-US/docs/Web/API/Element/scroll
I added it to the tweets container div which had the CSS overflow property set to scroll. Thanks

[@SteveGriffith-Prof3ssorSt3v3]

Glad you solved it.

[@thabosiphiwemngoma4772]

I am facing a very similar situation. I have a testimonial section positioned absolute to a div with overflow property value hidden. However, I made the testimonial overflow-x : scroll. My question then is how do I scroll the elements inside the testimonial section tag into view. I want to target the testimonial section tag to be the window the scrollIntoView() method operates on as I dynamically select these elements. I am essentially trying to create a responsive slider of the testimonial section.
element.scroll() doesn't seem to be the idea I am after. Do you guys have any idea how I can go about this?

[@chennakesavulusalla8879]

how to pause the scroll on hover

[@SteveGriffith-Prof3ssorSt3v3]

Using setInterval or requestAnimationFrame with scrollBy to continue the scroll and then stop calling the function when the mouseover event happens on what ever element you use as a trigger.

[@InglesporMinutoconAnthonyMartz]

.scrollto() does not move a number of pixels, for that you have scroll by . Scrollto() moves to position x or y. Great video though.

[@SteveGriffith-Prof3ssorSt3v3]

That is exactly what I said 0:26