Is it possible to have both for one site while using the anchor tags?
I have already set up a website that does horizontal scrolling for each parent page. Some of these parent pages has child pages in sections that I will like to have scroll vertically to on that page with a sub menu on top.
I know I will have to use Javascript for this, but I was wondering what I need to do in the function to differentiate the horizontal scrolling for the parent pages with the vertical scrolling for the parent page's sub sections.
Have you looked at Scroll Converter?
https://github.com/koggdal/scroll-converter
Related
Okay, I really like a vertical header and horizontal scrolling. I really went down a rabbit hole with this tutorial from Elementor Academy - https://elementor.com/academy/how-to-create-a-horizontal-scrolling-website-advanced-pro/ . I cannot get the website to scroll horizontally using the JavaScript provided in the tutorial. stackoverflow would not let me enter the JavaScript so you will have to view it from the link
This was working in the sections. I am trying this in the containers. I created a parent container and set the content width to full and the direction to horizontal. I then added child containers for each of the horizontal pages. Each child container is set to full width and the min height is set to 100VH. I just cannot figure out how to switch the navigation arrows on the keyboard using JavaScript to scroll horizontally. Switching the down arrow to the right arrow and switching the up arrow to the left arrow.
I have tried several JavaScripts to horizontally scroll the child containers within the parent container. I can scroll with the left and right navigation arrows on the keyboard. What I expect after applying the Java Script is for the down navigation arrow to scroll right and the up navigation arrow to scroll left.
Desired Result and Problem
I am using fullPage.js for page scrolling for the sections on my website. The portfolio is not fitting in one "page section" - and I need it to be inside a scrollable section (without moving to another page section). I would like the user to be able to scroll within the "portfolio container" to scroll down to view other companies, but not scroll past the companies page.
What I have Tried
To achieve this I have inserted this into my added js code which is supposed to enable scrollbars for the section, and also "reset" the scrollbars thereafter.
var movedo_grve_fullpage_data = {"scrollOverflow": "true"};
var movedo_grve_fullpage_data = {"scrollOverflowReset": "true"};
Link To Page
However instead of scrolling within the "portfolio grid" it is scrolling into a new "page" and when scrolling back - a white block is left below the grid
Before i start, I wanted to let you know that I have been searching high and low for a solution to my issue but the closest thread I've found is unfortunately without the answer to the actual problem - Position absolute inside div with overflow-x scroll and overflow-y visible
Essentially I got main page where I am dynamically loading some other pages and on some of them I used dropdown listboxes. It happened that I haven't noticed it earlier as content any of the pages wasn't wide enough for me to spot the problem.
The problem I face is absolutely positioned div (which contain dropdown) and visible horizontal scroll bar on the parent of this div. When I scroll my page horizontally the dropdown div stays in the same place on the screen. I read about "popping out" absolute divs under this link:https://css-tricks.com/popping-hidden-overflow/ but even there, I can observe similar issue I am currently facing, which is appearing of the vertical scroll on the parent element. I am trying to achieve similar effect like here:
http://jsfiddle.net/matcygan/4rbvewn8/7/ but stop vertical scroll bar to appear when the listbox is expanded - instead it should overflow the box and party cover horizontal scroll bar. Here I've found another prompt example how can I achieve it http://jsfiddle.net/b5fYH/ but when i try to play with it and make red boxes scrollable with content as well as overflowing outside of the content vertically, without creating vertical scrollbar, I am failing... I am also fine with using JS if CSS on it's own can't deliver such effect.
In the end after 3 days battle, the CSS won and I need to ask for a help...
Any support will be greatly appreciated.
Thanks in advance.
I have a div whose height is 500px. When I scroll the page down, I would like the div to move as the page scrolls, but I would like it to stop scrolling with the page after the 250px of the div are out of the view. The rest of the page should keep scrolling but the div should act as fixed after it is 250px visible on the page.
Additionally, when I scroll up, I would like the div to remain at 250px invisible until the user has scrolled all the way to the top (with the final 250px remaining) in which case the div should suddenly become a part of the page again and scroll with it.
I am assuming that this can be done only with JavaScript, but how?
OK, using the keywords suggested by Mike Brant up in the comments, my Google search produced some good results. It appears that the functionality I was after is called sticky div, or sticky menu, sticky footer, or likewise.
By looking at the code of those javascripts I was able to understand the concept behind it. Now, it's time to play with it and adjust to my particular needs.
I'm building a touch-enabled html app and decided to use iScroll for scrolling within a div.
essentially, I've got two seperate scrolling divs but the scrollbars are always placed on the far outside of the page
http://jsfiddle.net/SRXMn/3/
the problem I'm having here is two-fold.
1) the scroll bars are both on the far right side (which doesn't make much sense for the left-scrolling content
2) the scroll bar extends all the way to the top of the header, when the only content being scrolled is below
when I set 'position:fixed' on the header, it shrinks down to a tiny size, and I can't seem to over-right that.
You could try using position:relative on div.scroll_hold