I have this problem with my scrollbar that's overriding my header, is there some CSS property I can use to move the scrollbar "on-top" of my header? I have a transparent background which I thought would do the job.
Basically, how can I make my scrollbar hover above the header, instead of pushing it to the left?
As you see in the pic, the scrollbar is taking over the full width of the header.
Here is my scrollbar CSS:
'#global': {
'*': {
'scrollbar-width': 'thin',
}
,
'*::-webkit-scrollbar': {
width: '1rem', height: '1rem',
}
,
'*::-webkit-scrollbar-thumb': {
backgroundColor: '#d6dee1', borderRadius: '20px', border: "6px solid transparent", backgroundClip: 'content-box',
}
,
'*::-webkit-scrollbar-thumb:hover': {
backgroundColor: '#a8bbbf'
}
,
'*::-webkit-scrollbar-track': {
backgroundColor: 'transparent',
}
}
You can add a margin-top for the webkit-scrollbar-track :
'*::-webkit-scrollbar-track': {
backgroundColor: 'transparent';
margin-top: 10px;
}
This post explains it pretty good: Change scrollbar height
EDIT:
This post has a very similar problem:
How to get a scrollbar in a div with fixed header and footer?
The problem there was solved by fixing the header.
Related
I know it is possible to change a scrollbar using just CSS, but I wanted to remove the border radius of the scrollbar if it is at the top of its track. Is this possible?
1.setting up .myCss class with pseudo webkit-scroll in the CSS.
2.adding event Listener on the window object with event of scroll
which gives me the scrollY position every time i scroll and saving it in scroll.
3.if scroll is equal to 0 add myCss Class. and if its not I am removing it.
additions: setting condition to change when it hits the bottom.
firefox:window.scrollMaxY
chrome:document.documentElement.scrollHeight - document.documentElement.clientHeight
console.log(window.scrollMaxY) //FireFox (Max Scroll Height)
console.log(window.scrollY) //(current Scroll Height)
console.log(document.documentElement.scrollHeight - document.documentElement.clientHeight) //Chrome (Max Scroll Height)
window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
if (scroll == 0) {
document.body.classList.add("myCss")
}
else if(scroll==(document.documentElement.scrollHeight - document.documentElement.clientHeight)) {
document.body.classList.add("myCss")
}
else{
document.body.classList.remove("myCss")
}
});
p {
background-color: aqua;
width: 100vw;
height: 300vh
}
.myCss::-webkit-scrollbar {
background-color: gray;
width: 10px;
}
.myCss::-webkit-scrollbar-thumb {
background-color: white;
border-radius: 5px;
}
<p></p>
Is there any way to just change the colour of a scrollbar in CSS, but keep the native 'disappear when not scrolling' effect. Basically I just want to turn the native scrollbar blue instead of its default black/dark-grey, but whenever I apply code like this
::-webkit-scrollbar {
width:5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: blue;
border-radius:5px;
opacity:0.5;
}
The scrollbar looks how I want it too, but its persistent, instead of disappearing when i'm not scrolling. Is there any way I can keep that effect on a custom scrollbar?
EDIT - As requested my current browser is google chrome 73.0.3683.103
The most you can do using only css and webkit is to use the :hover/:active selectors to display or hide the scrollbar. The thing is, this will work on hover/selection and not on a finger swipe or a mouse wheel. Also this webkit property will not work on firefox or edge.
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 5px;
opacity: 0;
}
::-webkit-scrollbar-thumb:hover {
background: blue;
border-radius: 5px;
opacity: 0.5;
}
Info on webkit scrollbar
This question has a nice example of a smooth transition on hover
A late answer hopefully it still helps.
I don't think you can do this with pure CSS, (but i could be wrong)
You can use some jQuery to help you. I have a working fiddle here: https://jsfiddle.net/kingafrojoe/Le253gdw/29/
In your CSS .has-scroll to the scrollbar selectors as below
/* Add a css class to your scroll selectors */
.has-scroll::-webkit-scrollbar {
width: 15px;
}
.has-scroll::-webkit-scrollbar-track {
background: transparent;
}
.has-scroll::-webkit-scrollbar-thumb {
background: blue;
border-radius: 5px;
opacity: 0.5;
}
#tall {
height: 500px;
width: 100%;
background: #00ffff;
display: block;
}
In your HTML you will need a wrapper div wrapping the whole body of your document.
The body class also gets the class has-scroll jQuery will control this class.
<body class="has-scroll">
<div id="site">
<div id="tall"> I am tall content</div>
<!-- ALL other page HTML -->
</div>
</body>
</html>
Then some jQuery to detect the height of the content and the window.
If the content is taller than the window then there needs to be a scrollbar, else the scrollbar can do default behavior
<script type="text/javascript">
jQuery(window).load(function(){
var _body = $('body');
var _site = $('#site');
$(window).resize(function(){
show_scroll();// call the function on the window resize
});
show_scroll();// call the function
function show_scroll(){
// if the content wrapper is taller than the window add the has-scroll class,
// else remove the has scroll class to return default scroll behavior.
if(_site.outerHeight()>$(window).outerHeight()){
_body.addClass('has-scroll');
}else{
_body.removeClass('has-scroll');
}
}
});
</script>
I need to center a google line chart.
The problem is, I cannot use align = "center" because it causes my tooltip hover to lag behind, I'm not sure why.
I found a way to center the chart in the inspector by removing position: relative two divs deep in my chart div.
I thought to override this with
#electricalLineChart div div{
position: static!important
}
But it ignores this code even with !important
I haven't found anything in the documentation that addresses positioning. I tried using legend just for kicks but it doesn't seem to do anything.
Here is my chart code:
// line chart
var linechart1 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'electricalLineChart',
dataTable: joinedData,
options: {
colors: ['#4DC3FA', '#185875'],
animation: {
duration: 1000,
easing: 'out',
},
width: 800,
height: 500,
legend: { position: 'static'},
title: 'Line Chart',
explorer: {},
hAxis: {
title: 'Month'
},
vAxis: {
format: formatPattern
//title: 'Amount Billed ($), Consumption (kWh)',
}
},
});
RELEVENT HTML:
<div style="overflow-x:auto;">
<table class="container">
<tbody id="electrical-tables">
<tr id="odd-cells">
<td>
<div id="electricalLineChart"></div>
</td>
</tr>
.... other rows removed for clarity
</tbody>
</table>
</div>
RELEVENT CSS:
#electricalLineChart, #Request_line_chart1{
width: 80%;
margin: auto;
}
Essentially, the third div down in the image with dir= "ltr" needs to be position: static not position: relative.
the problem, <div> elements are block elements, which means they expand the total width of their parent element.
even though the chart does not take up the entire width,
the <div> still expands to the width of the parent.
to prevent this behavior, add the following css to the <div>,
which will allow it to be centered...
display: inline-block;
e.g.
#electricalLineChart, #Request_line_chart1{
width: 80%;
margin: auto;
display: inline-block;
}
It's complicated to put it in words, but here I go.
Alright so at the moment I'm working on a project that requires me too do one thing. That thing being when the nav bar gets too a certain point I want the color to change. So let's say I have a nav bar white, and underneath that it's gray. How do I go about that?
I don't think you can do it with HTML/CSS but this work
Javascript/jQuery
$( window ).scroll(function() {
if ($( window ).scrollTop() > 500) {
$('.nav').addClass('updated-color')
} else {
$('.nav').removeClass('updated-color')
}
})
CSS
.nav {
background-color: white;
}
.nav.updated-color {
background-color: gray;
}
i have problem with this code and the problem is that before 1200px everything is OK but after re-sizing to 1200px and more ( before width of scroll bar, for example chrome scroll-bar width is 17px ) before 1218px, we will see unwanted horizontal scroll-bar annoying us.
i want to solve this problem but i don't know how.
anybody knows how? so please guide me.
link of my codes and online test:
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100
my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="header">
<div class="inner-header">header</div>
</div>
<div class="body">body</div>
<div class="footer">
<div class="inner-footer">footer</div>
</div>
</body>
</html>
my css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
font-size: 30px;
text-align: center;
}
body{
background-color: orange;
}
.header{
border-bottom: 1px solid black;
}
.inner-header{
background-color: black;
}
.body{
height: 3000px;
background-color: blue;
}
.footer{
border-top: 1px solid black;
}
.inner-footer{
background-color: green;
}
.header,
.footer{
width: 100%;
height: 100px;
}
.inner-header,
.inner-footer{
height: 100%;
}
.inner-header,
.body,
.inner-footer{
width: 1000px;
margin: 0 auto;
}
#media screen and (min-width: 1200px){
.inner-header,
.body,
.inner-footer{
width: 1200px;
}
}
I know it a old question. but i had like to share this, Hopping someone will find it useful and will save someone's day.
So, There is no quick way, You will have to do some digging and find yourself the element which is causing overflow. Thus, creating unwanted horizontal scroll and pain in your ass. Normally one way would be to just write
body {
overflow-x: hidden;
}
and hope that overflow-x on body will remove that horizontal scroll bar but some times you have to apply overflow:hidden to you main container of the site. Which likely works all the time or most of the times. like,
.main_container {
overflow: hidden;
}
There are some tricks that can help you find those overflow elements such as using below JavaScript script, just open console and execute it there
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
OR you could execute jQuery one,
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
or you can use this little jquery snippet. It will logging out the elements directly in console along the elements width, which can help you to easily highlight them on hover in your console (at least in Chrome).
$.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;
or if you still can't find that particular element use this below trick,
//Open inspector -> “New Style Rule”:
* {
outline: 1px solid red;
}
You can always add: opacity: 1 !important; visibility: visible !important; if you think you might have a hidden element but usually the above works without extra effort.
Hope it helps someone. Happy digging.
I can't really recommend it but you can use overflow-X:hidden on the body element (not the element with a class of .body*). It's not as though you need to see anything outside of the sides of your container anyway...right?
* you should really not use that name for a class, it's unnecessarily confusing.
#media screen and (min-width: 1200px) {
body {
overflow-X: hidden;
}
.inner-header,
.body,
.inner-footer {
width: 1200px;
}
}
Ideally, you should adjust the design to allow for this though. Different browsers treat the scrollbars differently when it comes to calculating the viewport width.
Codepen Demo
You can change your .inner-footer from width: 1000px to max-width: 1000px; and that will fix the issue.
Here you change code like that. overflow-x: hidden; is hidden the horizontal scroll bar.
body{
background-color: orange;
overflow-x: hidden;
overflow-y: scroll;
}
You could solve this in quite a few ways - one of which is changing your width: 1000px to max-width: 1000px
Another might be simply styling / hiding the scroll bar with some -webkit prefixes. Wouldn't recommend this route for multiple UX reasons but if you want to read up on styling scrollbars - check out this resource.
Lastly you could specifically target the x-axis scroll bar with overflow-x and remove / hide it by setting this to hidden. Again - this method is not the best. How would a user know content is off the page without the scroll bar?
i solve it very easy. if you define min-width media queries = width + scroll-bar width ( for example in chrome is 17px or in opera is 15px but for sure we say 20px ) the problem will be solve.
new link of code:
codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100