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.
Related
I have a modal that has a horizontal scrollbar when the modal is resized on small screens. When that horizontal scrollbar appears, the vertical scrollbar disappears because it is stuck to the right. I would like the vertical scrollbar to stay at the right side of the modal while I scroll horizontally to the right. A picture of this behavior is show below. I want the vertical scrollbar stuck on the right while I horizontally scroll to the right rather than only being present when I finish horizontally scrolling to the right.
Is there a way to accomplish this? I believe another issue is that on Windows devices the scrollbar takes up space unlike in Mac devices.
You can customize the scrollbar a bit (see https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp), however, I don't know if you can change the position.
I did find a javascript scrollbar-plugin, which I haven't tried, but maybe it is worth a try? You can find it at https://grsmto.github.io/simplebar/.
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.
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
I'm trying to create a site that has a parallax type effect with scrollTo navigation control.
Similar to http://www.nike.com/jumpman23/aj2012/ however I only need to scroll on left and right (up & down). I can do horizontal and vertical parallax, and scrollTo I just cant get the diagonal parallax working (with mouse scroll)
I've currently got it working using scrollTo however this disables the user being able to scroll with the mouse. I'm creating a dynamic one page site so some times a pages content may be longer then other areas so the user will need to scroll down, once they reach the end of this content the parallax effect kicks in.
Can anyone suggest a way to do this? Or point me in the right direction.
Since I'm still new to Javascript/Jquery/HTML5/CSS3, I thought I'd ask a question for all you much more experienced programmers out there.
I'm kind of stuck at the beginning of my program logic. I want to do a website with a parallax "scrolling" effect, however the effect should only take place when the user clicks navigation buttons on the edges of the screen.
The layout of the website will be like this:
O
OXO
O
The "O"'s are the content divs, "X" is the "home" page (point of origin). If the user clicks the arrow at the top of the screen (from point of origin), the page will scroll up. Same goes for any of the other directions. I'm wanting one giant photo of the establishment in the background that shifts it's position based on the specific content div they "scroll" to, using the parallax effect.
I've been racking my brain for two days trying to figure out where to start with this. Any help would be greatly appreciated, and please let me know if I need to be more specific about something. Thank you!
The home page content is in the middle of the parallax experience.
For this reason, you will need a parallax plugin that can handle both vertical and horizontal parallax effects to allow proper navigation in your webpage.
Consider: Scrolling Parallax Plugin for jQuery
The above parallax demo page allows you to scroll both directions.
Here's the method/approach I would take using this plugin.
1. Design your website with horizontal and vertical content as required. Layout example:
OOO Here, the top of the webpage is content about the "starting" point.
OXO Next, you have content on the sides of the "starting" point as shown.
OOO Finally, content is below the "starting" point to complete the webpage.
2. Since the webpage visitor will see the very top of the webpage which is not desired, use jQuery.scrollTo() Plugin to set the "starting" point on page load.
3. Use a plugin or method that will allow 4 transparent arrow "div's" that are at each viewport side in "fixed" position. When clicking (or hovering) with the mouse, this will simulate scrollbar movement and the parallax webpage plugin will react accordingly. Example of layout (note outer navigation is semi-transparent):
UUUUU Webpage top-content is here plus the overlay arrow for UP Navigation.
LOOOR LEFT and RIGHT Navigation arrows are seen on top of more "top" content.
LOXOR The center starting point will show the "fixed" Navigation arrows.
LOOOR LEFT and RIGHT Navigation arrows are seen below the "starting" point.
DDDDD Bottom-content is here plus the overlay arrow for DOWN Navigation.
The most difficult part of the webpage is to have enough "filler-content" that occupies the top and sides of the "starting" point. But if that "filler-content" is a thumbnail gallery, then this particular parallax page would look really nice (and unusual!).