I am trying to make a scrollbar appear only when a user hovers over the component. The problem is that the scrollable element has a cutoff on the side of it when it is hovered compared to when it is not, like in the video below
This is the css I am using to make the scrollbar appear when it is hovered over
.scroll-on-hover:hover {
overflow-y: scroll !important;
}
And then it's applied like
<div style="position: fixed;" class="scroll-on-hover">
<nav style="background-color: navy; height: 100%;" >
...
</nav>
</div>
It happens because you are forcing it to show the scroll bar.
It is the expected behavior, a scroll bar will always occupy and overlap the content.
As you say:
I am trying to make a scrollbar appear only when a user hovers over the component. ...
There are two problems:
By making it just scrollable or not, you are not showing or hidding the elements.
The :hover works only on desktops, mobile cannot do that.
For the first problem, I encourage you to use "play" with display, translate, or any other prop that actually can hide and show the elements.
For the second, a similar approach can be :active, it's when you click and touch on mobile, instead of :hover that works only for the desktop mouse.
Edit
What you are looking for, is not a native scroll bar, it is a div, actually a lot of them and a huge peace of functionality.
Facebook is making a mimic of a scroll bar, a custom one, and for sure it's way more complex than an overflow-y style.
Related
As stated in the title. When you start tabbing it doesn't respect the fact that there is a nav overlay at the bottom of the screen. So certain links and buttons that are hidden behind the overlay will be tabbed to without being in view of the user.
Is there a way for me to override this functionality and force tabbed items into view?
Trying to intercept tab etc. and adjust the scroll position yourself is one possibility as you have stated but that could potentially lead to unexpected behaviour.
A better way to handle this is to adjust your layout to account for the overlay at the bottom.
In essence all of your main content would sit in a container (this may be the <main> element if your overlay at the bottom is an <aside> otherwise just use a <div>).
Make that container the page height minus the height of the overlay.
That way no content will ever be behind the overlay (which technically is no longer an overlay as nothing goes behind it).
The beauty of this is when you get to the very bottom of the page everything will be visible, with an overlay you may end up with something partially obscured if you don't give it enough margin / padding at the bottom.
I have found two things:
DocumentOrShadowRoot.activeElement this would one way we could capture the currently focused button or link.
Element.scrollIntoView() this would be how we force the focused element to the center of the viewport.
My page layout features a header and a main element. I set the main element via css to overflow: auto, so that a scroll bar appears whenever the content is larger than the screen.
However when I press Ctrl+F to toggle the browser search and search for something, the results on the page are highlighted as usual but the "minimap" of search results in the scroll bar that usually is there is missing.
I can bring that "minimap" back when I remove the overflow: auto from the main element, however that makes the scroll bar go over all the page and not just the main element as I would prefer to.
I tried this in current versions of Chrome as well as Firefox and both show the same behavior.
This element is the only scrolling one and the scroll bar is on the very right of the window - it just starts below the header element, which I find aesthetically much more pleasing.
Is there any way that I can bring the search result highlighting "minimap" back to the scroll bar?
You can customize the default webkit scrollbar using css, javascript but it won't be easy to customize. Custom scrollbars come in handy in this case.
You can use the npm package rc-slider and customize the scrollbar based on your requirement. Here is a working example of the scrollbar which highlights clickable markers at every 6th row.
On my website I use pure.css and the navbar consists of more elements than a small screen can display without scrolling. Therefore a scrollbar appears in that case, which I don't want.
I would like the navbar to stay at the top so that the navbar and the content scrolls simultaneously. When I use position:absolute; everything looks even worse. Also the mobile version of that navbar should still work (on mobile screens scrolling though the navbar should still be possible).
I also tried to deactivate overflow-y, but then, obviously, not every element on the navbar is clickable.
If you want that navbar and content scroll simultaneously, you shouldn't use position:fixed.
Remove position:fixed
Add float:left to menu div
Add float:right to content div
If I misunderstood what you want, the comment made by Marco Valente should be nice.
I have a menu that's within a div that I hide off screen. When the menu-button is pressed I bring the menu in to view. Whilst doing this, I shift the visible content of the body over to one side, allowing room for the menu.
When I originally did this, I placed overflow-x:hidden; in the body and it worked perfectly for desktops. When I loaded the website on to my phone, I noticed that the phone didn't behave the same - it attempt to display the menu and all of the content that was on the screen.
I did a little reading and it stated that mobile browsers ignore overflow-x when placed in the html or body tags and a wrapper div should be created.
When i made this edit my menu vanished. When I click the menu-button, the content moves across for the menu but it doesn't appear.
What is going on here? I don't quite understand why the menu would disappear. How can I fix this?
The wrapper that I made is....
#body_wrapper{
overflow-x: hidden;
}
<div id="body_wrapper">
My nav bar...
My menu...
my content...
</div>
My website is - http://robingham.co.uk/LUUCC6/index.php
This current edit of the website has the overflow-x:hidden; set in the body of the CSS, not the body_wrapper. So the menu displays but it doesn't properly function on a mobile.
So i fixed my issue! Whoop!
Originally i was using .animate() in Jquery for my menu animation. The menu would hide offscreen and using the animate function i would 'slowly'(285px in 0.3s) move the menu in to place on screen. Whilst this worked perfectly fine for desktop browsers where i placed overflow-x: hidden; in to the CSS for the body. Mobile browsers ignore overflow-x: hidden; when placed in the body.
Reading around i saw many times about placing overflow-x: hidden; in to a wrapper for the body content. Ie. content . Whilst it indeed stop a scroll bar popping up for the x-axis and content being shrunk, it screwed up my menu - my menu just vanished. For whatever reason putting overflow-z: hidden; in to the wrapper didn't agree with the Jquery animate function. I tried placing the menu outside of the wrapper but still no luck. I also tried playing overflow-x: hidden; in to both the wrapper and the body with no success.
Okay so time for a new strategy, as i spent far too long playing with my menu to just scrap it.
My solution
I currently have my menu sat outside of the wrapper and so i've decided to keep overflow-x: hidden; in both the body and the wrapper. Maybe an overkill but at least i know it'll function as intended regardless of the browser. Maybe in the future, i'll have a little faff with putting the menu back within the wrapper and only have the overflow-x: hidden; in the wrapper and see if it still works. (I kind of don't like having many things that do the same/similar job scattered everywhere. It feels a little messy.)
The menu has three associated classes attached to it now. menu, menu_hide, and menu_show. menu has all of my CSS formatting. I use the menu_hideand menu_show classes to hide and show the menu.
My default HTML for the menu looks like this. Note that it has two classes.
<div class="menu menu_hide">
My CSS for the hide and show look like this. Note that transition does the same job as the Jquery .animate() function.
.menu_show{
transition: 0.3s;
left: 0px;
}
.menu_hide{
transition: 0.3s;
left: -285px;
}
My JS looks like this. Note that i toggle between the menu showing and hiding classes everytime i hit the menu button.
$('.icon-menu').click(function() {
$('.menu').toggleClass( "menu_show menu_hide" );
});
I have a page I'm working on that encompasses a vertical drop-down menu. However, when the menu drops down, it pushes the text below it downwards and off the page. This is expected, but this enables the scroll bar on the side of the page. I was wondering it there was a way to get rid of this. In other words, it shouldn't just not scroll, but never even offer the option to scroll.
Thanks!
If you want no scrollbar to appear and no scrolling whatsoever to occur, in the CSS for the div in which you contain said dropdown use
overflow: hidden;
This will cut off any 'additional content' though; see an example here
Use overflow: hidden; on the element you want to hide the scrollbar on.