Single DIV in screen when scroll down

HTML & CSS
1

When I click arrow down and key and scroll down through mouse then, one-by-one sindle dic show in center of the screen.
I understand I am able to elaborate what I want because English is not my native language but I am trying best to elaborate… for example this is the website https://www.amity.edu/ when I click scroll down or scroll down though mouse the website show single div in screen same How I can made this…
Please provide the sample dummy code so we can understand…

I don’t know what is the name of this function and code…
Please help me
Thank you

2

Do you simply want to display one viewport full of content at a time.

If so you can do that with flex and use min-height:100vh.

Here is a basic demo.

Is that what you were after or something more comnplex?

3

Sir it bit similar of my question but here keyboard down and up button / mouse scroll each div not working working… How i achieve like this https://www.amity.edu/

4

In what way is it similar, exactly?

Do you say keyboard arrows or mouse scroll (what about scrollbar?) should move the page the same as the click on the links do in the example @PaulOB posted?

The link you give doesn’t move differently than any other site, if I’m understand correctly.

1 Like
5

You would need js to do that until scroll-snap is implemented properly in CSS.

JS would detect the arrow keys or the pageUP/Down keys and then trigger the scroll to the next element.

There are some JS libraries that can help with this but gets pretty complicated pretty quickly.

http://imakewebthings.com/waypoints/

6

I visit the link you mentioned but I don’t understand how to use and when i scroll down there it show right side notification based my mouse events. but I don’t to make that that.
Please help me sir… If you know the code to do… Please update your codepen

7

I’ve updated the codepen to use the css scroll-snap behaviour which will scroll to the next div using the arrow or page keys. It works in latest Chrome, IOS and Firefox but not sure about Edge support.

As I said implementing this in JS is quite a task to do properly and would be a follow up question for the js forum.

You could purchase a plugin to make life easier if you have limited coding experience.

Here’s one I’ve seen that seems to fit the bill.

https://codepen.io/alvarotrigo/pen/NxyPPp

1 Like
8

Thank You sir… But code asking Licence KEY what is this ? Is that free ? is there any other way to do without charges ?

but I am satisfied to your answer thank you for understanding us…

1 Like
9

The licence terms of the software are documented on this page. I believe its free for non commercial open source use but if its a commercial product then you should pay the relevant fee. At £29 for the most common option its not a great deal and indeed is about the half hourly rate for a proper developer. I believe you can try before you buy anyway and you can always contact the author if you want further clarification.

If you don’t want to pay then use the CSS version I posted which needs no JS, works with arrow keys and up and down keys and smooth scrolls. It will only work in latest browsers but still be usable in others.

You have two choices really. Pay someone to do it for you or learn how to do it yourself. :slight_smile:

We can help you learn if that is your aim.:wink:

3 Likes
10

Thank You @PaulOB

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.