I want to customize scroll bar for the whole application. Which means I want to change the default browser look on scroll bar. In my styles.scss file I have tried but saw no difference in scroll bar:
::-webkit-scrollbar {
//changes
}
html::-webkit-scrollbar {
//changes
}
body::-webkit-scrollbar {
//changes
}
::ng-deep ::-webkit-scrollbar {
//changes
}
app.component.html:
<app-shell>
<main>
<router-outlet></router-outlet>
</main>
</app-shell>
shell.component.html:
<nav>
<!-- navbar here -->
</nav>
<main>
<ng-content></ng-content>
</main>
Is there something that I misunderstood about scrollbars? How to change the browser default scroll bar around the application?
UPDATE: Even if there is nothing to scroll on the page, there is white scrollbar on the right side.
I have used many times these code lines:
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: #FF0000;
}
They worked for me in many situations.
Try using !important or specifying the div in which the scrollbar is rendering (I needed this is some cases)
.your-div-selector::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
.your-div-selector::-webkit-scrollbar-thumb {
background: #FF0000;
}
Related
I have a fixed anchor tag linked to a heading on my website. This anchor tag has an arrow icon that is meant to be a quick way to get to the top of the page. I wanted to position it at the bottom right, but the link is taking up full width at the bottom of the page unless I use "width: fit-content;'. I tried all the display options and float only works on the icon and not the link. It makes the arrow icon float to the position I want but the link width is still taking up all the pages width. Does anyone know how I can fix the width of the link and position it to the bottom right side of the page? Thank you in advance.
NOTE-
I am using bootstrap 5
#quick-anchor-top {
font-size: 25px;
padding: 15px 25px 15px 25px;
border-radius: 50px;
color: rgb(0, 0, 0);
background-color: rgba(182, 20, 20, 0.800);
transition: all 0.4s ease;
margin: 20px;
}
#quick-anchor-top:hover {
transition-duration: 0.4s;
color: white;
background-color: rgba(0, 0, 0, 0.800);
}
<a id="quick-anchor-top" href="#header-title-1" class="fixed-bottom float-end"> <i class="fa-solid fa-arrow-up"></i></a>
You can use predefined bootstrap 5 classes to position elements on the site. Use position-fixed and bottom-0, end-0 to set your element to the bottom right corner.
Just change your classes in the anchor element like this:
<a id="quick-anchor-top" href="#header-title-1" class="position-fixed bottom-0 end-0"><i class="fa-solid fa-arrow-up"></i></a>
Here is an example: https://jsfiddle.net/5j7do14t/
More: https://getbootstrap.com/docs/5.0/utilities/position/
Always try to share your full code so others can understand better and help you in a faster way. As I can see your code is missing an important point which is the position.
Since you didn't share the full code I will try to explain to you how to do a Scroll back to top button in a very easy way.
First of all, you need the button itself, and secondly, do your style, and finally, the JavaScript code that will handle the scroll.
So let's start.
1. Create the button that will take you to the top of the page when clicked on.
<button id="quickAnchorTop" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>
For the naming, it's better to use the camelCase since you will use its ID in the CSS and in the JS code, so we can call your button (quickAnchorTop instead of quick-anchor-top).
2. Now the most important part, is the CSS to style your button.
#quickAnchorTop {
display: none; /* It should be hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 20px; /* Place the button 20px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: blue; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 16px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Font size */
}
#quickAnchorTop:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
3. Finally, use JavaScript to handle the scroll and show your button.
// Get the button from the current page:
let myBackToTopButton = document.getElementById("quickAnchorTop");
// When you scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
myBackToTopButton .style.display = "block"; // To show your button
} else {
myBackToTopButton .style.display = "none"; // To hidd your button
}
}
// When you click on the button, scroll to the top of the document
function topPageFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
In the above JS code, first, you will get your button by the ID you used which is (quickAnchorTop), then you will have a function to handle the scroll and to show or hide your button.
Now make sure to update your button code and use this final form as you added the onclick event to your button:
<button onclick="topPageFunction()" id="quickAnchorTop" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>
Hopefully this will help you.
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'm trying to hide the scroll-bar in ion-content (Ionic 4)
there's no ion-scroll on ionic 4 so I used the ion-content
but I can't find any css attribute to hide it (most of them not work)
I do want to scroll but I don't want to see the scrollbar
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
I've tried it but it doesn't work in ion-content.
Because of Ionic use shadow DOM for ion-content, should disable scroll in element on shadow DOM and after that make ion-content his own scroll and then hide scroll bar for ion-content. The result's ion-content with the hidden working scroll bar.
Need to use CSS Custom Properties. Add styles to global scope.
ion-content {
// overwrite inline styles
--offset-bottom: auto!important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
In Ionic 4 you must use following, because Ionic use shadow DOM:
global.scss
.no-scroll {
--overflow: hidden;
}
and in page
<ion-content class="no-scroll">
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
ion-content {
--offset-bottom: auto!important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
overflow: hidden;
}
ion-content {
overflow: hidden;
--overflow: hidden;
}
.scroll-content {
overflow: hidden;
}
ion-infinite-scroll.md.infinite-scroll-enabled.hydrated {
overflow: scroll!important;
height: 100%!important;
}
The <ion-content> is a custom element with shadom DOM. There's something called the ::part pseudo element to target an element in a shadom DOM element.
If you look at the shadow dom, you will see this:
Take notice of the part="scroll". Ionic did add parts to their elements that we can use via the ::part pseudo element to target this and apply our custom css to hide the scrollbar:
ion-content::part(scroll)::-webkit-scrollbar {
display: none;
}
Tested this on iOS and Android successfully. I'm not getting it to work on Chrome though.
Try this, seems to work fine so far while preserving all functionality in Ionic 5.
// variables.scss
ion-content {
width: calc(100% + 15px);
}
ion-content::part(scroll) {
padding-right: 15px;
}
I have confirmed the following solution works in Ionic 5 although i do believe this should work in Ionic 4 as well.
As others here have noted, the scrollbar which controls the scrolling of content inside of an ion-content component exists in the shadow DOM within it and thus you need to target the scrollbar using ::part() CSS pseudo-element.
In your global style sheet add the following css declarations which will hide the scrollbar while retaining the ability to scroll:
/* chrome, safari */
ion-content::part(scroll)::-webkit-scrollbar {
display: none;
}
/* firefox */
ion-content::part(scroll) {
scrollbar-width: none;
}
Thank you #rostislav
Your solution even don't suggested by WebStorm and draw yellow underline in the meaning of warning, but work for me and work, it's awesome :)
solution: add these lines to both global.scss and variables.scss:
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
overflow: hidden;
}
ion-content {
overflow: hidden;
--overflow: hidden;
}
.scroll-content {
overflow: hidden;
}
NOTIC: then clear browser cache and refresh page, it's great!
but don't forget that scroll disabled in all pages, add this code to only .sccs file of pages that don't need to be scrolled!
Refactored #Sergey Oleynikov solution and it worked perfectly for me
ion-content {
// overwrite inline styles
// --offset-bottom: auto !important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
Here is a hack? https://github.com/ionic-team/ionic/issues/17685
<ion-content>
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>
I couldn't find a reliable way to do this using the previously mentioned methods, they either didn't work or stopped the scrolling all together. My approach was to make the ion-content window wider than the screen.
.noscroller {
left: -10px;
width: calc(100% + 20px);
}
if you want to remove the scroll dynamically. You can use the approach of removing the scroll-y class from shadowDOM at <main class="inner-scroll scroll-y"></main> within <ion-content></ion-content>.
Firstly, import { Renderer2 } from '#angular/core' in your constructor(renderer: Renderer2)
To reach this, in your your-component.component.ts at event cycle ngAfterViewInit or onward.
This will remove the scroll from the page activated in your app.
for(let el of Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
{
this.renderer.removeClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
}
This will add the scroll from the page activated in your app.
for(let el of Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
{
this.renderer.addClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
}
The Code from spicemix worked! I pasted the code in global.scss and not in variables.scss
/* global.scss */
ion-content {
width: calc(100% + 15px);
}
ion-content::part(scroll) {
padding-right: 15px;
}
For me it works after adding the no-scroll class in the <IonContent> element, as mentioned above, and after adding the following lines
useEffect(() => {
const style = document.createElement("style");
style.innerHTML = ".inner-scroll.scroll-y.overscroll { overflow: initial; }";
ionContent.current.shadowRoot.appendChild(style);
}, []);
Then in the render <IonContent ref={ionContent} className="no-scroll">...</IonContent>
The thing is that in these classes inner-scroll and scroll-y there is a overflow: hidden; style so we just have to override it.
I believe you can use
slot="fixed"
to make the element fixed thus removing the scroll bar by default for you.
Refer ionic documentation
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
NOTE : The name of the post is what I suppose is happening... It can be edited later if someone find a better short description
> What am I trying to do ?
I'm trying to hide a scroll bar by adding padding on the right side of the scrollable element.
This element contains child elements (list or table)
> What problems are you facing ?
The width of the child element should be 100% of the containing element, but obviously it's less.
The empty space on the right looks like it's the scrollbar place.
So my questions are :
Why is that happening ?
How can I get the childElement (.inner*) to fit in the ContentBox of its parent ?
> Can you reproduce the bug ?
Here is a Fiddle with nothing else but what I'm talking about : JsFiddle
> Show me that code !
SIR YES SIR :o)
#mainWin {
overflow: hidden;
}
.container {
width: 100%;
padding-right: 40px;
box-sizing: content-box;
overflow: auto;
}
.innerContent, .innerTable {
width: 100%;
}
/* ################################################################ */
/* DO NOT REMOVE */
/* FIXED PROPERTIES */
#mainWin {
/* Simulate a calculated width (in %) */
width: 400px;
}
.container {
/* Arbitrary height of the scroll zone */
height: 200px;
}
/* DEBUG ¨PROPERTIES */
#mainWin {border: 1px solid #000;}
.container {background: #A55;border: 1px solid #5A5;}
.innerContent, .innerTable {background: #55A;border: 1px solid #D4E200;}
/* END DO NOT REMOVE */
/* ################################################################ */
<div id="mainWin">
<div class="container">
<table class="innerTable">
<tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr>
</table>
</div>
<hr>
<div class="container">
<div class="innerContent">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
</div>
</div>
</div>
PS: I put some CSS properties apart (end of CSS section) because I don't think they have anything to do with this problem and seems mandatory for me to get the expected result
♥
I found a way to solve my problem by adding some Javascript. If someone has a pure CSS solution, I would like to see it.
Here is the Javascript added :
function removeScrollBar() {
$(".container").each(function() {
var iWidth = $(this).width();
var child = $(this).find(".innerTable, .innerContent");
child.css('width',iWidth);
});
}
$(function() {
removeScrollBar();
});
Working JsFiddle