I want to achieve this:
What I already achieve:https://plnkr.co/edit/a3XfJo6Fxtru9V5zpVYR?p=preview
.dropdown-menu { //container
overflow-y: overlay;
background-color: transparent;
}
.dropdown-menu::-webkit-scrollbar {
width:10px;
}
.dropdown-menu::-webkit-scrollbar * {
background:transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
background:$blue !important;
border-radius: 6px;
}
Does someone have any ideas how I can do that? How can I make the items stay between their container and the container's scrollbar so they looks like the design?
I tried putting z-index in the elements but seems not to work.
Just switch the unit in body tag from % to vw
and you will get the over content effect.
body {
width: 100vw;
overflow-x: hidden;
}
body::-webkit-scrollbar {
width: 0.7em;
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: #c0392b;
}
http://manos.malihu.gr/jquery-custom-content-scroller/
This plugin works pretty well. Suggested! Easy to modify as well!
Make some changes in your css file use this code
.dropdown-menu::-webkit-scrollbar-track {
background-color: #E0E0E0;
}
remember to remove display: none; property from your code or change it to display: block;
So I use Modernizr to detect javascript. Based on the .no-js class, I have the following:
html.no-js .navContainer {
visibility: visible !important;
}
.navContainer{
visibility: hidden;
}
If the user has javascript enabled, the element is hidden. If they do not have javascript enabled, the element is visible.
Works great. Now I want to do the reverse. That is, I want an element hidden if the user doesn't have javascript. What is the best way to do that?
I've tried a number of things, including numerous variations on this:
html.no-js .navButton {
display: none;
}
html .navButton {
display: block;
}
but so far, nothing has worked. It's my understanding that html.no-js .navButton should only be selecting on <html class="no-js">. Is that not the case?
Try putting it in page directly like below.
<noscript>
<style type="text/css">
#import url (nojs.css);
.navButton {
display: none;
}
</style>
</noscript>
To hide visually and from screen readers use
html.no-js .navbutton {
display: none
}
If you want to hide visually and from screen readers, but maintain layout:
html.no-js .navbutton {
visibility: hidden;
}
To hide only visually, but have it available for screen readers:
html.no-js .navbutton {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
To extends the previous style to allow the element to be focusable when navigated to via the keyboard:
html.no-js .navbutton.focusable:active,
html.no-js .navbutton.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
Sources
HTML5Boilerplate
Hiding content for accessibility
I have found this code from google, and it is working fine but the pop up window is transparent and I want to make it opaque. (I know that the pop up window is transparent because if I zoom in the browser I can see the pop up window overlapping with the background content and the background content is visible)
Here is the link to code:
popup window
<HTML>
<HEAD>
<TITLE>Popup div with disabled background</TITLE>
<style>
.ontop {
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #cccccc;
color: #aaaaaa;
opacity: .8;
filter: alpha(opacity = 80);
}
#popup {
width: 300px;
height: 200px;
position: absolute;
color: #000000;
background-color: #ffffff;
/* To align popup window at the center of screen*/
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
</style>
<script type="text/javascript">
function pop(div) {
document.getElementById(div).style.display = 'block';
}
function hide(div) {
document.getElementById(div).style.display = 'none';
}
//To detect escape button
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
hide('popDiv');
}
};
</script>
</HEAD>
<BODY>
<div id="popDiv" class="ontop">
<table border="1" id="popup">
<tr>
<td>
This is can be used as a popup window
<br></br>
Click Close OR escape button to close it
Close
</td>
</tr>
</table>
</div>
<CENTER>
<h3>
Simple popup div with disabled background
</h3>
<br/>
Click here to open a popup div
</CENTER>
</BODY>
For some reason, I am not sure of, I couldn't make this code work in jsfiddle, but I have used the same code in one html file with tags for css and it is working fine.
Kindly help.
It works, but only if the Javascript comes before your onclick-handlers in the source code.
So you need to change the following setting in JSFiddle (the second dropdown must be set to "No wrap - in <head>":
In the updated fiddle, I also fixed the opacity issue. Your whole overlay had opacity: 0.8; and that affects also all children of that overlay. Instead, you should use slightly transparent background-color in rgba notation for overlay:
background-color: rgba(204,204,204,0.8);
https://jsfiddle.net/ppqct0dg/4/
rgba uses decimal number, in contrast to #cccccc notation, which uses hexa-decimal numbers.
Now use this code (and many variations of this), but scroll track get dark-grey color, something like #222222 or near this. Find many examples, but all of them give same result. Opera, Chrome and Firefox show this bug. How to fix?
#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: transparent;
}
#style-3::-webkit-scrollbar {
width: 6px;
background-color: transparent;
}
#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}
Edit:
The solution that I gave with overflow: overlay still works in browsers like Google Chrome and you can still see my answer below. However, overflow: overlay was marked depreciated.
Whether an alternative solution exists, is unknown, but the one mentioned below still works for Google Chrome.
From what I understood from https://github.com/w3c/csswg-drafts, is that the alternative was ment to be scrollbar-gutter. But there's actually nothing pointing towards an alternative solution, except people saying that there would be.
The documention of scrollbar-gutter says, that the user agent is able to control whether it shows classic or overlay scrollbars. And the people at the csswg-drafts say that the people that would implement such a feature, don't seem to be interested into it.
If we want an alternative solution, then we have to tell them, here: https://github.com/w3c/csswg-drafts/issues/7716
I can't suggest this alone, they need more people that would be interested in having a "feature" to let the website author control whether a classic or a overlay scrollbar should be used.
Regarding Google Chrome's overlay scrollbars. They've made an experiment that allows the user to enable it at chrome://flags/ and then searching for "Overlay Scrollbars".
Answer:
If you use this for "body":
body {
overflow: overlay;
}
The scrollbar will then also take transparent backgrounds across the page.
This will also put the scrollbar inside the page instead of removing some of the width to put in the scrollbar.
Here is a demo code. I wasn't able to put it inside any of the codepen or jsfiddle, apparently it took me a while until I figured out, but they don't show the transparency, and I don't know why.
But putting this in a HTML file should go fine.
Was able to put it on fiddle: https://jsfiddle.net/3awLgj5v/
<!DOCTYPE html>
<html>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
overflow: overlay;
}
.div1 {
background: grey;
margin-top: 200px;
margin-bottom: 20px;
height: 20px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(90, 90, 90);
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}
</style>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
Best way to test it is to create a local html file, I guess.
You can also apply that on other elements, such as any scrolling box. While using inspector mode, it could be that you have to put the overflow to hidden and then back to anything else. It probably needed to refresh. After that it should be possible working on scrollbar without having to refresh it again. Just note that was for the inspector mode.
With pure css it is not possible to make it transparent. You have to use transparent background image like this:
::-webkit-scrollbar-track-piece:start {
background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
::-webkit-scrollbar-track-piece:end {
background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
.scrollable-content {
overflow-x:hidden;
overflow-y:scroll; // manage scrollbar content overflow settings
}
.scrollable-content::-webkit-scrollbar {
width:30px; // manage scrollbar width here
}
.scrollable-content::-webkit-scrollbar * {
background:transparent; // manage scrollbar background color here
}
.scrollable-content::-webkit-scrollbar-thumb {
background:rgba(255,0,0,0.1) !important; // manage scrollbar thumb background color here
}
Embed this code in your css.
::-webkit-scrollbar {
width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: none;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
-webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb:window-inactive {
background: none;
}
Only this code worked for me tho -
<!DOCTYPE html>
<html>
<style>
body {
overflow: overlay;
}
::-webkit-scrollbar {
width: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: white;
border-radius: 2px;
}
</style>
<body>
..Your code here
</body>
</html>
The standard way to do this (which currently only works in Firefox) is:
:root {
scrollbar-color: transparent transparent;
}
Just set display:none; as an attribute in your stylesheet ;)
It's way better than loading pictures for nothing.
body::-webkit-scrollbar {
width: 9px;
height: 9px;
}
body::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment {
display: block;
height: 0;
background-color: transparent;
}
body::-webkit-scrollbar-track-piece {
background-color: #ffffff;
opacity: 0.2;
/* Here */
display: none;
-webkit-border-radius: 0;
-webkit-border-bottom-right-radius: 14px;
-webkit-border-bottom-left-radius: 14px;
}
body::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #333333;
-webkit-border-radius: 8px;
}
Try this one, it works fine for me.
In CSS:
::-webkit-scrollbar
{
width: 0px;
}
::-webkit-scrollbar-track-piece
{
background-color: transparent;
-webkit-border-radius: 6px;
}
and here is the working demo:
https://jsfiddle.net/qpvnecz5/
To control the background-color of the scrollbar, you need to target the primary element, instead of -track.
::-webkit-scrollbar {
background-color: blue;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
I haven't succeeded in rendering it transparent, but I did manage to set its color.
Since this is limited to webkit, it is still preferable to use JS with a polyfill:
CSS customized scroll bar in div
if you don't have any content with 100% width, you can set the background color of the track to the same color of the body's background
It might be too late, but still. For those who have not been helped by any method I suggest making custom scrollbar bar in pure javascript.
For a start, disable the standard scrollbar in style.css
::-webkit-scrollbar{
width: 0;
}
Now let's create the scrollbar container and the scrollbar itself
<!DOCTYPE HTML>
<html lang="ru">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
...meta
</head>
<body id="body">
<div class="custom_scroll">
<div id="scroll_block" class="scroll_block"></div>
</div>
...content
<script src="main.js"></script>
<script>customScroll();</script>
</body>
</html>
at the same time, we will connect the customScroll() function, and create it in the file main.js
function customScroll() {
let scrollBlock = document.getElementById("scroll_block");
let body = document.getElementById("body");
let screenSize = screen.height - scrollBlock.offsetHeight;
document.addEventListener("scroll", () => {
scrollBlock.style.top = (window.pageYOffset / body.offsetHeight * (screenSize + (screenSize * (body.offsetHeight - (body.offsetHeight - screen.height)) / (body.offsetHeight - screen.height)) )) + "px";
});
setScroll(scrollBlock, body);
}
function setScroll(scrollBlock, body) {
let newPos = 0, lastPos = 0;
scrollBlock.onmousedown = onScrollSet;
scrollBlock.onselectstart = () => {return false;};
function onScrollSet(e) {
e = e || window.event;
lastPos = e.clientY;
document.onmouseup = stopScroll;
document.onmousemove = moveScroll;
return false;
}
function moveScroll(e) {
e = e || window.event;
newPos = lastPos - e.clientY;
lastPos = e.clientY;
if(scrollBlock.offsetTop - newPos >= 0 && scrollBlock.offsetTop - newPos <= Math.ceil(screen.height - scrollBlock.offsetHeight)) {
window.scrollBy(0, -newPos / screen.height * body.offsetHeight);
}
}
function stopScroll() {
document.onmouseup = null;
document.onmousemove = null;
}
}
adding styles for the scrollbar
.custom_scroll{
width: 0.5vw;
height: 100%;
position: fixed;
right: 0;
z-index: 100;
}
.scroll_block{
width: 0.5vw;
height: 20vh;
background-color: #ffffff;
z-index: 101;
position: absolute;
border-radius: 4px;
}
Done!
I was able to get a transparent background, and transparent scroll bar like this:
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar {
width: 12px;
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(33, 37, 41, 0.45); // change 0.45 to 0 to make it invisible
}
Also you can add this to your body element, to display your scroll bar above the website content:
overflow: overlay;
Inside a div, there is a picture that should have 10px margin in all directions from the DIV's border. On the left bottom corner of the picture there is an about-image.
The picture is only displayed when its loaded in the DOM through jquery.
The problem is that the existence of the about-image dislocates the picture downwards as many pixels as the height of the about-image.
I am looking for the cleanest possible alternative to keep the picture inside the DIV and still display the about-image on top of it. Setting the picture as background will not work since i need the picture to load at once.
Any improvement on the #about css would be greatly appreciated.
Below is a full html page that reproduces the issue
<html>
<head>
<title>Troubleshooting :: align the main picture inside the DIV</title>
<style type="text/css">
html, body {
background-color: #000000;
}
#about {
z-index:2;
position:relative;
top:82%;
left:3%;
}
#pic {
width:100%;
height:96%;
}
#main-content-image {
height:100%;
margin-right:10px;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
}
#main-content {
height:490px;
border-width: 1px;
border-style: solid;
border-color: #777777;
}
#main-content-image.loading {
background: url(http://farros.gr/images/ajax-loader2.gif) no-repeat center center;
}
a {
text-decoration: none;
text-decoration: none;
color: #868686;
outline:none;
}
.hide {
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$(function () {
var img = new Image();
$(img).load(function () {
$(this).hide();
$(this).width('100%');
$(this).height('96%');
$('#main-content-image').removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', 'http://farros.gr/images/bg.jpg');
});
});
</script>
</head>
<body>
<div id="main-content">
<div id="main-content-image" class="loading">
<img id="about" src='http://farros.gr/images/about.png' alt='Haris Farros'/>
</div>
</div>
</body>
</html>
Use position: absolute for the about pic and you can put it anywhere you want. Also make sure to set #main-content-image to position: relative so it becomes the reference point for the about image.
edit: I've tested it with your html, and it works.
A (dirty) javascript solution would be to give the anchor that wraps your image the "about" id instead, and set #about to 'display: block;'
Then, inside your image load callback, add the following statement:
$(this).css({marginTop: "-40px"});
Beware downvoters; I'm not a fan of having markup rely on javascript code execution, but that's what happens in his code already anyway.
Absolute positioning will accomplish what you seek:
#main-content-image {
position: relative; /* Needed so absolute positioning works on child */
}
#about {
position: absolute; /* absolutely positioning it takes it out of the document flow */
bottom: 10px; /* You said you wanted it on the bottom left, right? */
left: 10px;
}