Asked 19 hours ago in CSS by Marcelo Miranda (20 points).
I'm trying to build an image gallery and I want the slide buttons to be on the extreme edges of the page.
the problem is that the right button gets overlayed by the page's scrollbar.
Is there any way to prevent that? I've tried to use this but it makes no difference at all.
html {
overflow-y: scroll;
}
Have you tried making the scrollbar smaller?
.long-content {
height: 120vh;
font-size: 128px;
}
/* width */
::-webkit-scrollbar {
width: 3px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<div class="long-content">Really Long Content</div>
Related
I've been searching all day to override this annoying iphone problem with scrollbars
so I've this very simple example
.scroller {
background: lightblue;
height: 1000px;
max-width: 400px;
margin: 90px auto;
padding: 40px;
}
.page {
max-height: 90vh;
overflow: scroll;
background: navajowhite;
}
<div class="container">
<div class="page">
<div class="scroller">
lorem ipsum
</div>
</div>
</div>
which just an html divs with overflow scroll this works very well on web and android chrome but for some reason on iPhone(chrome and safari) this scrollbar is not showing at all.
short story
I was missing with codepen for a while until my mind was blown when I saw the scrollbar is showing on the (html, css, js) snippets boxes on iPhone so I decided to investigate a little on this website and learn how they managed to get it to work on iPhone, I learned that it was a scrollbar actual element that simulate the movement of the actual scrollbar. I tried to make it work this way but I just gave up, that was a lot of work and it wasn't worth it.
I also tried -webkit-overflow-scrolling: touch;
also if you want to take a deep look into the original website you can find it in here
I am open to any ideas.. (simple I hope)
If supported, modifying the ::-webkit-scrollbar style rules, will display the scrollbar on most devices permanently and not hiding them, like mobile browser defaults do.
Except Firefox and Internet Explorer, every commonly used browser, supports it.
There are some properties you can modify.
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
And a lot of pseudo-class selectors, which allow for more specific selection of the parts.
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
Firefox supports CSS Scrollbars Module Level 1, but not the ::-webkit-options by now.
This might be helpful too:
https://stackoverflow.com/a/6165489/10304804
https://stackoverflow.com/a/54101063/10304804
Your example with minimalistic -webkit-scrollbar-style-rules:
.scroller {
background: lightblue;
height: 1000px;
max-width: 400px;
margin: 90px auto;
padding: 40px;
}
.page {
max-height: 90vh;
overflow: scroll;
background: navajowhite;
}
/* minimal */
.page::-webkit-scrollbar {
width: .5em; /* counts only for the vertical scrollbar */
height: .5em; /* counts only for the horizontal scrollbar */
}
.page::-webkit-scrollbar-track {
background: #ccc;
}
.page::-webkit-scrollbar-thumb {
background: #888;
}
.page::-webkit-scrollbar-thumb:hover {
background: #555;
}
<div class="container">
<div class="page">
<div class="scroller">
lorem ipsum
</div>
</div>
</div>
I want to have three different kind of scrollbar whose padding & margins are different.
Below is global style for my scrollbar:
/*
Modifying the scroll bar across the whole application
*/
/* width */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 10px;
width: 5px;
height: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #999999 !important;
border-radius: 10px;
}
::-webkit-scrollbar-track {
background: #d1d1d1 !important;
border: 1px solid #ebebeb !important;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
Now I want to have scroll bars with different padding & margin using classname or id. I don't want scrollbar padding and margin to effect padding & margin of content present in scrollbar. How can I write css in this manner which will put different padding for each scrollbar.
You can select that element the same way you selecting elements with css.
Select the container div and add your rules like this
<div class="container">
<div class="innerdiv"></div>
</div>
.container {
height: 300px;
width: 300px;
overflow-y: scroll;
}
.container .innerdiv {
height: 600px;
background:blue;
}
.container::-webkit-scrollbar {
width: 3px;
}
.container::-webkit-scrollbar-thumb {
background: black;
}
.container::-webkit-scrollbar-track {
background: red;
}
here is a working example -> https://jsfiddle.net/2fzpoycv/
Look Here is an Example
and its also here
read this URL may b this solve your query https://css-tricks.com/almanac/properties/s/scroll-padding/
I'm trying to make a horizontal scroll gallery for a portfolio of photography on my website, but I want the images to be responsive to height (to fit varying screen sizes). To try and do this I have used the unit: vh and this is causing me problems.I have a position:fixed header and footer so they always stay on the screen while you scroll through the gallery. With the CCS I have used this means as the screen gets smaller, the images go underneath the header & footer rather than constantly staying inbetween them.
I have seen a website with an ideal horizontal gallery very similar to what I am trying to achieve. You can check out the website here. On the linked website the images always seem to stay equidistant from the header and footer.When inspecting the element it looks like they're using tables, which I understood to be a big no, no. Is this how they are achieving this effect on the gallery?
I've linked a JS Fiddle to a very basic version of my design so you can see what I've done so far.
JS Fiddle: https://jsfiddle.net/pmh9zvta/1/
Basically, in a sentence I'm asking how I can achieve the same effect as the example website in the link.
Robin,
Hmm...so vh can actually achieve a pretty similar effect. Your example images are rather extreme, though (1500x100).
Check out this fiddle I made (using your code as a base):
https://jsfiddle.net/Benihana77/5xw21tvc/
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
height: 100%;
box-sizing: border-box;
position: relative;
}
body {
position: relative;
margin: 0;
padding-bottom: 100px;
min-height: 100%;
}
#header {
width: 100%;
padding: 10px;
margin-right: auto;
margin-left: auto;
position: fixed;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.92);
text-align: center;
z-index: 1;
}
#gallery-wrapper {
position: relative;
padding-top: 60px;
overflow-x: scroll;
}
#gallery-wrapper img {
height: 70vh;
width: auto;
}
#footer {
font-family: Corda-Light;
font-size: 14px;
color: #333;
width: 100%;
padding: 5px;
padding-top: 13px;
padding-bottom: 8px;
padding-left: auto;
padding-right: auto;
position: absolute;
bottom: 0;
background-color: #efefef;
text-align: center;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.9);
z-index: 1;
}
/* Navigation Bar Styling */
.nav {
border-bottom: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
/* Horizontal Gallery Styling */
ul.gallery-row {
white-space: nowrap;
}
ul.gallery-row li {
list-style: none;
display: inline;
}
/* Footer Styling */
.footer {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.footer img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Main changes
Added a wrapper around your content for better management (within JSFiddle and out).
Changed your footer to be positioned absolutely, along with a host of other changes that allow it to stick to the bottom until your Viewport is too short. Then it gets pushed down like a normal footer. This keeps your content from going behind the footer.
Made the "gallery-wrapper" with "overflow-x:scroll". I'm personally not a fan of side-scrolling galleries, but if your heart is set on it, this will keep the side-scrolling contained to this block, and no your entire website (in turn obviating the need for a "fixed" footer).
Chose some more realistic image dimensions to work with, and a shorter vh (70).
Regarding your example, as best as I can tell, they're using Javascript to rewrite the height of the "scrollHolder" container DIV. So their solution is not CSS-only, instead using JS to read the height of the browser and adjust the height accordingly.
I'd also say their approach is flawed, as it doesn't scale properly to browser width. On a thinner screen, you can only see zoomed-in pieces of each image.
So, in addition to the above changes, I'd recommend:
Setting media-queries at an appropriate browser width (say 760) so that your images become scaled by browser width, not height (so vw, not vh).
This might require some special "min-height" settings in order to keep your tall images from becoming toooo tall, and short images from becoming little munchkins.
After some researches I found out that I have to set the tbody of a table
display: block;
overflow: auto;
to enable scrolling on a html table.
Is there a possibility to hide the scrollbar generic on every modern browser (Chrome, Safari, Firefox)? I tried some solutions like this one but it doesn't work on a table.
Use overflow: hidden; to hide the content outside of the container, or overflow: visible; to display it even if it's going outside of the container borders. Both remove the scrollbar.
You can remove scrollbar easily by using the following CSS class:
.overflow-hidden {
overflow: hidden;
}
If you are using Bootstrap just use overflow functionality. Find docs here
<div class="overflow-hidden">...</div>
.hideScrollbar::-webkit-scrollbar{
display: none;
}
<div class='hideScrollbar'></div>
Just add the next css code
/* width */
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: transparent;
}
We hope this help
So basically I'm creating a navigation bar (seen below) and I want to know if it's possible to create an upward ribbon type of thing.
Ignore the badly designed rest of the navigation, but I simply want the right part, the upward ribbon. Is it possible to do so, and preferably without images? I'm fine working with them, but I prefer it without.
Any help would gladly be appreciated, and thank you in advance.
Try something like this. It is pure HTML and CSS, and you can change the bar and ribbon height.
Fiddle
HTML
<div id='wrapper'>
<div id='bar'>This is the bar</div>
<div id='corner'><div id='ribbon'></div></div>
</div>
CSS (I have explained how I got all the numbers in /* comments */)
#bar {
background-color: blue;
color: white;
width: 70%;
float: left;
height: 30px; /* bar height */
}
#corner {
width: 0;
height: 0;
border-top: 30px solid blue; /* bar height */
border-right: 30px solid transparent; /* bar height */
float: left;
}
#ribbon {
height: 10px; /* ribbon height */
margin-top: -40px; /* bar height + ribbon height */
background-color: green;
width: 30px; /* bar height */
}
#wrapper {
margin-top: 20px; /* ribbon height + 10px padding */
}