I have a vertical list and on small screens, it has an overflow-x scroll. there is the active class for the active tab. However, if I click for example last item, it is not visible %100 as seen in the screenshot.
I tried to use the scrollIntoView() function but it didn't work out for mobile devices.
Is it possible to do it via CSS? the scrollbar has to move according to the active tab so the active tab should always be visible
screenshot
Can you share what code you already have so we know what you're really trying to do?
Are you talking about tabs like the ones found on YouTube?
If so, it looks like taking CSS from this Codepen will answer your question if you are in fact asking how to get tabs like the ones shown above. Just look around and see what you need to do to modify it to your liking and then adjust your code. Click on the link and go to #13 (won't let me post a Codepen without code, but scroll down to #13 and there's your answer)
https://csshint.com/css-tabs/
I searched "animated css tabs" on Google, went to the first result and scrolled down to #13 to find this.
Related
I'm trying to make a webpage that scrolls horizontally using fullpage.js.
I have the divs set-up and it works perfectly when I click the dot menu or use my keyboard to control it. Now I need it to work with scrolling.
So When I scroll down, I want to go to my 2nd div anchor point (just like it does when I press my right arrow key).
Is this possible in anyway? So far I only found this example but does that mean I have to pay incase I want this functionality or am I missing something?
Just set:
scrollHorizontally: true
In your instantiate function.
You can find all the available properties for fullpage here:
https://github.com/alvarotrigo/fullPage.js#fullpagejs
Edit: updated answer. Misread question.
Recently I am creating a page with a small menu in the content, just to switch between different content topics. Nearly similar to a small slideshow, just with a simple line navigation above the content with the different topics.
So I am just looking through the web to find some alternative ideas for the typicall hamburger icon for the mobile version, since I am using it already for the main navigation.
I found this:
'http://codepen.io/fbrz/pen/bNdMwZ'
I dont want to use the pull-down function, but I love how the different menuitems appear and come from outside the content area in focus.
So I had the Idea of maybe just using the swipe menu-items, without the pull down function.
So my question is, did anybody of you have found or even created a similar navigation somewhere, and if yes where? I would love to find some more options/ideas?
Thanks as always for your input!
I think this could be something useful for you
Scroll Overflow Menu
The Problem:
I have a web application on the iOS homescreen so there is no browser window and it looks and functions very well. I've figured out how to make inner div elements do the touch scrolling events and use the momentum/bounce style in iOS, and that works perfectly... the issue I run into now is that the bounce scrolling (again, iOS-only) is messing up any fixed elements or site-related animations I have on the page.
When I try the following:
document.ontouchmove = function(e) {e.preventDefault()};
The issue stops, but now I can't scroll anywhere on my application.
What I Need:
I want the body to be completely locked in place... If someone grabs, say, my sidebar or navbar and then pulls on the page, the body bounces! But if someone is inside the content area, there is no issue at all--the application scrolls flawlessly and looks great. If I stop scrolling on the sidebar or navbar or body, all scrolling in the application will not working and is essentially nonfunctional.
tl;dr: Body bounces on scroll. I want a scrolling content area and no scroll anywhere else. The body should NEVER move, but elements I deem scrollable within the body should.
As a sidenote, I've browser the following popular questions/solutions posted (among many others):
1
2
3
I just wanted to post that up before people assumed I didn't do any searching... I've been at this for hours now and have seen even more solutions than posted above, but I wanted to get the most popular ones listed above so no one thought this was a duplicate question.
I figured this out a few days ago and have this handy jsbin set up to demonstrate what I did to make this work:
My Working jsbin Example
When you open this link on an iPad, the text should be scrollable. Try tugging around the rest of the screen when there is no current touchmove event currently working.
If you play around with it, you'll notice that only the inner textfield moves as expected. This is determined by putting my .scrollable class within the .container class. The .scrollable class takes up the full height of it's parent container.
Now make the container a larger height, like height: 500px. The goal here is to make it large enough to have no overflow yet small enough to have other whitespace on the iPad still. Try scrolling it or pulling it... No touchmove events are fired and the screen stays in place.
My JS determines if an object has overflow after being touched. If it does, it scrolls. If it does not, it does not send a scroll event.
Play with it and let me know if I can provide any better examples and also if you run into any bugs... Right now the only one I know of is if you're really trying to break it and start tugging around the site while a current touchmove event is being fired, or the page is first loading... I wouldn't count those as "bugs", but if you can find a fix for those too, I'm all ears!
I've seen one or two sites lately that take over the default scrolling in browsers.
When scrolling down, it will animate a scroll down to the next content section (stopping any scroll events during the animation.
When scrolling up, the same thing happens, but to the previous section.
The site I currently have is here: http://cirkut.net/sub/proven/parallax/
I've got the parallax down, but I can't think of an easy way to takeover the scroll and animate this. I'm fairly certain there must be a js/jQuery plugin to do this (I'm currently using stellar.js).
I've been searching for hours to find the example of what I want, but I can't find anything. If I find one, I'll come back and edit this.
Thanks for any leads or help!
i am working on a site that scrolls horizontally. before i put the jquery scroll.to plugin in, i have some work that needs to be ironed out with the anchors.
you can see in the example, when you click to go to box 2, it doesn't go to the right location. then when you click back to box 1 or home, it's placed the content flush to the left side.
this is very similar to a previous question, but it's not answered.
You can see this. This is working great. You can see the source code and try. It is using jquery plugin to smooth scroll.
SEE THIS