I am coding with React and I am trying to make a horizontal scrollable menu at the top of my application. When I have scrolled and selected a tab, I want this to be animated such that it floats nicely to the middle of the visible menu. The current selected menu tab can be outside of the view (e.g. if I have scrolled horizontally far away from it).
So when I click Tab no. 4:
I want this to happen (that Tab no. 4 are smooth sliding to the center of the menu:
You can use some great plugins like this in order to achieve desired functionality
Related
Consider a scenario when you have a responsive design, with 3 columns.
On desktop:
left menu
main column (whole page is scrollable)
right menu
On mobile:
top menu
main column (scrollable)
bottom menu
On desktop when scroll event occurs anywhere on the page - I would like to be able to scroll the content inside the content column. On mobile, we scroll the content within the main column itself.
Here is the example: https://jsfiddle.net/sf8m97L2/5/
https://user-images.githubusercontent.com/20644772/165400320-e26e7157-3014-4dda-800d-2e441c98c654.mp4
So here comes my issue/question - is it possible somehow to propagate scroll events from anywhere on the page to the perfect-scrollbar target location (in my case, form body to the content column)?
Currently if the user wants to scroll the content in the main column the user has to hover the mouse over that area specifically. I would like to allow scrolling when the cursor is outside the default zone. Please check the fiddle.
Using latest version 1.5.5
You can use Sticky-sidebar to do what described.
Of course, the scroll bar will not be in blocks, but in the main window, but you can scroll while holding the cursor at any position of the document
See example:
https://blixhavn.github.io/sticky-sidebar-v2/examples/basic.html
I made this website with an accordion menu in a sidebar on mobile, and there is one little problem i can not solve.
If you look at the page https://lieth-schule.de and open the sidebar on a mobile device (button underneath the image banner) you can see the accordion menu. If you now open a submenu, you can only scroll if you exactly hit the scrollbar of the whole sidebar.
What do I have to change in order to be able to scroll the entire sidebar, when touching and holding anywhere inside it? Like you would do on a mobile touch device?
Most likely the scroll does not work because the opening of accordions is done through mousedown
Need to be converted to click
I am trying to figure out how to create a simple mobile first layout with two sliding panels. Basically, if the width of the viewing area is less than 700px I would like the layout to look like this:
This will mostly be for mobile screens and allow the user to click the hamburger menu in the top left to have the left menu slide in to the left, or click the ellipsis in the top right to have the right menu slide in from the left. Seems simple but I want both menus to be fixed so when the main content is scrolled through the menus don't get put up at the top.
Also, when the viewing area is over 700px I want the two menus to show automatically like this:
I was wondering if someone could help me with this real quick. I can't seem to nail it down. I appreciate it.
To achieve the responsive requirement, you could use media queries to set specific CSS styles to the screen size you want.
To achieve the fix top menu bar, you could refer to position:fixed
Can you direct me or give me some advice please on how to create a navigation bar (Angular 1, jQuery, css, etc) that behaves like Google Chrome bookmarks bar when the page is resized. Basically as the page size gets smaller a new button/symbol (>>) appears on the bar. Buttons from the right that cannot fit due to the smaller resolution move under the >> symbol. If you press the symbol a drop down appears with the hidden buttons. When the page reaches mobile resolution of course I will switch to mobile menu, but I need this step between the full menu and the mobile.
Google Chrome browser manages bookmarks bar view when you resize the page in a great way. If in Chrome you have a lot of bookmarks two arrows (>>) appear on the right side and when you make the window smaller more bookmarks hide under these arrows.
Thanks a lot for your help.
Making menu div overflow:auto would be simplest solution. Here's plunk for that
http://plnkr.co/edit/vAYTGgNnQtH1iE2vsIpS?p=preview
For your particular requirement, here is horizontal slider with arrows in the end to handle scroll
https://codepen.io/mahish/pen/RajmQw
So I have about 8 pages, more or less that I want the user to be able to scroll to each one horizontally. However each one of those 8 pages is also pretty long and needs a vertical scroll bar in each page as well. So when the user uses the horizontal scroll bar they should be able to navigate the different pages, but when using the vertical scroll bar they should be able to just scroll up and down on the page that they're viewing.
I looked at at fullpage.js and sly.js and I'm not really sure which one would be the best to achieve this kind of design. Also if anyone has any other suggestions on how to do this that'd be great too.
If you go for fullpage.js, it doesn't provide any horizontal scroll bar. You can scroll horizontally form one slide to another by using the keyboard arrows or by using any visual element in your site.
fullpage.js provides arrows by default to do so. But you can substitute them for any other element.
Then you can use the option scrollOverflow:true to allow the vertical scrolling within the slides.