How show scrollbar only with hover? (support mobile) - html

I faced with interesting design problem.
I need to make scrollbar as at youtube menu (left menu):
Default scrollbar hidden, but with :hover show scrollbar.
I use overflow: hidden and overflow: auto ( for :hover).
But for mobile devices don't work for this method.
I search solution and find several interesting way:
https://codepen.io/kizu/pen/OyzGXY
.scrollbox {
width: 10em;
height: 10em;
overflow: auto;
visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover,
.scrollbox:focus {
visibility: visible;
}
.scrollbox_delayed {
transition: visibility 0.2s;
}
.scrollbox_delayed:hover {
transition: visibility 0s 0.2s;
}
<h2>Hover it</h2>
<div class="scrollbox" tabindex="0">
<div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>
<h2>With delay</h2>
<div class="scrollbox scrollbox_delayed" tabindex="0">
<div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>
But I have not know height of wrapper and this solution don't work for me.
Whether there is a working way to make something similar without JS use?
If is not present, then what simplest solution for JS?
(i find example by JS-library: https://tympanus.net/Tutorials/ScrollbarVisibility/index.html)

Scrollbar rendering is very inconsistent across browsers. On Mac, for example, it does the behavior you describe, by default, if using webkit.
If you want something working across all devices, you should rely on a JS solution.
But I would advice to really think about the use-case behind this, as, as a general rule of thumb, anyone messing with the user's scrollbar has a poorly designed interface to begin with.

I came up with a solution to my problem.
This proved to be the obvious method: media query. I set the media query (:hover) for large devices (PC). And for small devices, the scroll is always shown.
Of course, this solution may not be suitable for everyone, but for me it turned out to be a good solution.
For a universal solution is suitable JS (as Edouard Reinach said).

Related

Enabling scroll using Tailwindcss

I am using Tailwindcss and trying to achieve a design, in which there is a scroller in middle section.
However, the scroller is disabled and it's full height is not fit to it's parent.
Following is the part of the code:
<div class="h-full bg-green-200">
<div class="overflow-y-scroll">
<p class="my-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
eius fugit optio sapiente provident enim nihil at nemo
molestiae quo, inventore consectetur esse nisi, consequuntur
consequatur! Dolor facilis quasi molestiae?
</p>
<p class="my-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
eius fugit optio sapiente provident enim nihil at nemo
molestiae quo, inventore consectetur esse nisi, consequuntur
consequatur! Dolor facilis quasi molestiae?
</p>
<p class="my-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
eius fugit optio sapiente provident enim nihil at nemo
molestiae quo, inventore consectetur esse nisi, consequuntur
consequatur! Dolor facilis quasi molestiae?
</p>
</div>
</div>
I tried giving h-full, h-fit. I also tried using grow, flex-1. But it isn't working as expected.
Full code here in sandbox:
https://codesandbox.io/s/spring-sun-e9mrrv
h-full : sets an element’s height to 100% of its parent, as long as the parent has a defined height.
you have set the overflow as hidden to the parent element. So basically your div has full height as its content but the overflow is hidden.
You have also set overflow of your div to scroll but since its fitting its content wholly in the div, the scrollbar is disabled as there is nothing to scroll.
You can either set a fixed height to the div where you need the scroll or some of the parent divs.
Check out the solution here
Change your
overflow-y-scroll To
overflow-y-auto

CSS "position: sticky" not sticking [duplicate]

This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 4 years ago.
I'm making my first website and I want to make the tab bar to stick to the top of the screen and stay on screen when you scroll, but position:sticky doesn't seem to be doing this.
div#tabBar {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
background-color: #29335C;
}
<div>
<div id="tabBar">
<a class="tabLinks">Home</a>
<a class="tabLinks">About Me</a>
</div>
<h1 id="homeFrame">Anna Grace</h1>
<div id="projectList"></div>
</div>
If you want it to the top of the screen, simply switch to position: fixed;
Position fixed is always relative to the upper left corner of the window, which is convinient in your case. Be aware that, because a fixed elenmet has no width, the content will start under/behind it. You might wat to give your body a padding top equal to the height of your header.
Position sticky works differently. It remains as a block/normal element until it's at the given top position, than it switches to fixed behaviour. Think like those advertisements that appear nexto content and stay where they are when you scroll down.
In your case the difference will be minimal, as the header start at 0, so it instanly switches to fixed,it just might behave a little more unpredictable.
it's works. I deleted parent div.
#tabBar{
position: sticky;
top:0;
background-color: #29335C;
display:flex;
flex-direction:row;
}
p {
font-size:36px;
}
<div id="tabBar">
<a class="tabLinks">Home</a>
<a class="tabLinks">About Me</a>
</div>
<div id="projectList"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus necessitatibus ad voluptates? Libero harum perspiciatis incidunt voluptatum aliquam magni facere officia debitis? Placeat, saepe dolores praesentium culpa a voluptate quia?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus necessitatibus ad voluptates? Libero harum perspiciatis incidunt voluptatum aliquam magni facere officia debitis? Placeat, saepe dolores praesentium culpa a voluptate quia?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel, deleniti blanditiis neque id libero, sit consectetur harum optio omnis dolorem quo laborum quaerat doloremque ullam corporis pariatur sunt excepturi maiores!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non neque error quod nam repellat placeat vitae odit, nulla a deserunt nostrum est nihil sed dicta accusamus molestiae recusandae modi saepe.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eligendi quod accusamus dignissimos minus eum dolorum, commodi enim asperiores dicta nesciunt officiis praesentium quasi voluptas, explicabo sapiente neque atque perferendis!</p>
give outer div some height and the try. thanks
div#tabBar {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
background-color: #29335C;
}
.outer{
height:1000px}
<div class="outer">
<div id="tabBar">
<a class="tabLinks">Home</a>
<a class="tabLinks">About Me</a>
</div>
<h1 id="homeFrame">Anna Grace</h1>
<div id="projectList"></div>
</div>

Numbers don't wrap to new line in fixed width

I have two <div>. One of them with 'Lorem ipsum' text, second - with numbers. I found, that div with numbers, don't wrap numbers to new line in fixed width <div>. Is anybody can explain, why number don't wrap to new line, maybe this situation described somewhere in specifications?
JSFiddle.
div {
width: 200px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div>
<div>111111111111111111111111111111111111111111111111</div>
Because the browser treats numerals as regular text and won't break it unless you tell it to with something like the word-wrap or word-break property. Add a rule like:
div {
width: 200px;
word-wrap:break-word;
}
to do that.
jsFiddle example
div {
width: 200px;
word-wrap: break-word;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div>
<div>111111111111111111111111111111111111111111111111</div>

Text Wrapping with Zurb foundation

I want to be able to wrap text if there is a resizing of the window, I know this can be done as there have been other questions similar to mine in SO. (I guess this one would qualify )
I am using Foundation 4 (latest version) and the provided solution does not work; for example take a look at the following screenshot here which shows the result, computed CSS rules and actual page markup. It also shows that the strings of consecutive a's are not wrapped as they should. Any ideas on how to go about an correcting this?
It is not a language. It is a CSS framework. Word wrapping techniques are same as CSS. try the code below.
.class
{
word-wrap: break-word;
}
You can do this with the align attribute. This allows the text to wrap.
<div class="row">
<div class="small-6 columns">
<img align="right" src="http://placeimg.com/240/240/any">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores nemo, illum mollitia quos delectus. Cupiditate deserunt ipsa esse a fuga, veniam, magnam, possimus reprehenderit commodi voluptate quaerat quisquam vel sed.</p>
</div>
</div>

Is it possible to make scrollbar position:absolute?

If you have every created a dynamic page, you may notice that if you start out with a page height that does not require a scrollbar and then add content dynamically, the scroll bar will appear. When it does this, it "pushes" all of my content to the left the width of the scroll bar and it appears that everything on the page jumps a little.
Is it possible to make the scrollbar act as if it were position absolute so that instead of pushing my content all to the left, it just lays over the content. I do not like the way the content all "jumps" to the left; it looks nasty.
Thanks
you can use overflow: overlay to avoid your content being pushed, what is does is instead of taking your container space it position the scrollbar to top of you content
.overlay {
width: 100px;
height: 100px;
overflow: overlay;
}
.auto {
width: 100px;
height: 100px;
overflow: auto;
}
<h2>scrollbar on content</h2>
<div class="overlay">
<div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>
<h2>scrolbar sharing space with content</h2>
<div class="auto">
<div >Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>
the div with overlay css placed on top of the overflown div however the div with auto overflow pushes the data.
Using this for container with text is not an ideal solution, but I chooses text so the difference would be clear
You could, but it wouldn't be perfect. Copying the code from this post:
// Used like $('#my-id').hasScrollbar();
jQuery.fn.hasScrollbar = function() {
var scrollHeight = this.get(0).scrollHeight;
//safari's scrollHeight includes padding
if ($.browser.safari)
scrollHeight -= parseInt(this.css('padding-top')) + parseInt(this.css('padding-bottom'));
if (this.height() < scrollHeight)
return true;
else
return false;
}
You could query to see if the scroll bar is present. Before this, however, you'll have a global variable that is the width of the viewport prior to the scrollbar appearing:
var viewportWidth = $(window).width();
And after running the function above, you could compare this viewportWidth with the new viewport width of the window with the scroll bar, and margin-right the body the negative amount of the difference.
What you ask cannot be done.
You could however, force it to appear at all times:
#id {
overflow: scroll;
}
But this is horribly ugly.