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>
Related
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 have a top menu using Bootstrap and have made it transparent, but want it to change to opaque once a user scrolls to the next section/div on the page. Anyone know the best/easiest way to accomplish this?
You can add a class on scroll down, or remove your class what is rewriting Bootstrap styles.
$(document).ready(function() {
// Transition effect for navbar
$(window).scroll(function() {
// checks if window is scrolled more than 500px, adds/removes solid class
if($(this).scrollTop() > 500) {
$('.navbar').addClass('solid');
} else {
$('.navbar').removeClass('solid');
}
});
});
This will assign a class to your top menu initially setting it to a transparent version, then once you scroll down past the threshold, it will remove that class which will remove the transparency.
$(window).scroll(function() {
var scrollPercent = ($(window).scrollTop() / $(document).outerHeight()) * 100;
if (scrollPercent > 20)
$('#container').removeClass('transparent')
else
$('#container').addClass('transparent')
});
#container {
height: 1000px;
background-color: orange;
}
.transparent {
opacity: .2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="transparent">
</div>
I would like to create a button using that floats until footer and then stops
1) Button should be poisition: fixed; bottom: 0px when footer is not visible
2) When footer becomes visible, button should just sit on top of footer
The button should handle following cases.
when states change in angular, when we get data from server the footer is visible for a moment and then the page expands, what will happen then?
when the page has less content and footer is visible, button should sit on top of footer.
How can i do this?
Here is the plunker i started to play around with
http://plnkr.co/edit/SoCBjkUjFICiuTeTPxDB?p=preview
I came across this post when searching for a similar solution. Without a ready answer, this is what I ended up doing, based on this post https://ngmilk.rocks/2015/04/09/angularjs-sticky-navigation-directive/ .
Basicly you need a $scope.$watch to watch for scope change, and an event handler attached to the onscroll event.
angular.module('myApp')
.directive('stickyBottom', function($window) {
return {
restrict: 'A',
scope: {},
link: function (scope, elem, attrs) {
// the element box saved for later reference
var elemRect;
// element height
var height = elem[0].clientHeight;
// element top, will be changed as scope is updated
var top = 0;
// updates element's original position
scope.$watch(function(){
elemRect = elem[0].getBoundingClientRect();
return elemRect.top + $window.pageYOffset;
}, function(newVal, oldVal){
// this is the original element position, save it
if(!elem.hasClass('fixed-bottom')){
top = newVal;
}
// properly position the element even in `fixed` display
elem.css('width', elemRect.width);
elem.css('left', elemRect.left);
// check position
toggleClass();
});
// toggle `fixed-bottom` class based on element's position
var toggleClass = function() {
// the element is hidden
if (elem[0].getBoundingClientRect().top + height > $window.innerHeight) {
elem.addClass('fixed-bottom');
}
// the element is visible
else {
// the element is visible in its original position
if (top - $window.pageYOffset + height < $window.innerHeight && elem.hasClass('fixed-bottom')) {
elem.removeClass('fixed-bottom');
}
}
}
// bind to `onscroll` event
$window.onscroll = function() {
toggleClass();
};
}
};
})
;
And here's some css:
.fixed-bottom {
position: fixed;
top: auto;
bottom: 0;
}
You can accomplish this affect without using angular at all by modifying your style.css. The simplest solution in this case is just to set the bottom parameter of the #to-top element to be at minimum higher than the footer, for example:
#to-top {
position:fixed;
bottom: 60px;
right: 10px;
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background: red;
color: white;
font-weight: bold;
text-align: center;
cursor: pointer;
}
I am looking for a way to animate (with #keyframes, transform...) some elements when the user scrolls the page. For example:
When offset is 0: div has height: 100px.
When offset is between 0 and 100: div is height: 50px and color: blue.
And so on...
Is is possible using pure CSS?
If it is not, what are the most efficient ways to do it with HTML or Javascript?
The most efficient way to animate an element's style properties depending on scroll position will probably be to add a class with a scroll function:
Working Example
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y > 500) {
// myID.style.backgroundColor = "blue"; // you can add individual styles
myID.className = "blue" // or add classes
} else {
// myID.style.backgroundColor = "red";
myID.className = "red"
}
};
window.addEventListener("scroll", myScrollFunc);
body {
height: 1100px;
}
#myID {
position: fixed;
height: 100px;
line-height: 20px;
transition: all 1s;
}
.blue {
background: blue;
animation: myAnimation 1s both;
}
.red {
background: red;
}
#keyframes myAnimation {
0% {
border-radius: 0px;
line-height: 10px;
}
100% {
border-radius: 100%;
line-height: 100px;
}
}
<div id="myID" class="red">Hello world</div>
Docs:
.scrollY
.className
.addEventListener
Methinnks it's not possible to 'spy' scroll with pure css. If you want, you can do this with jQuery:
$(document).scroll(function() {
var pos = parseInt($(document).scrollTop())
if(pos == 0) {
$('.yourDivClass').css({
height : '100px' ,
color : '#fff'
})
}
if (pos > 0 && pos <= 100) {
$('.yourDivClass').css({
height : '50px' ,
color : 'blue'
})
}
console.log(pos)
})
and of course if you wanna get a smooth transition, you supposed to declare transitions in your css file
.yourDivClass {
transition: height 0.5s ease
}
Scrolling is an event. Once you scroll the page, the event gets triggered and something happens. You cannot control events using Pure CSS. Period.
Some people would argue that even :hover is an event. Yes, and it is for some strange reason, implemented in CSS, but not others.
With pure CSS: no.
But you can have a class with keyframed animation associated with it, and then say when the element is scrolled into view, to add the class to the element. This will make it start doing the animation.
You can use Waypoints.js to set what happens when you reach a specific element of a page.
Please have a look at this fiddle: http://fiddle.jshell.net/ikmac/q7gkx
Use this link to test in the browser: http://fiddle.jshell.net/ikmac/q7gkx/show/
HTML:
<div class="nav">
test1
test2
test3
</div>
<div id="test1" class="test">test1</div>
<div id="test2" class="test">test2</div>
<div id="test3" class="test">test3</div>
CSS:
.nav {
position: fixed;
top: 20px;
left: 0;
width: 100%;
height: 20px;
background: #000;
}
.nav a {
float: left;
font-size: 20px;
color: #fff;
}
#test1 {
margin-top: 1000px;
height: 1000px;
background: red;
}
#test2 {
height: 1000px;
background: blue;
}
#test3 {
height: 1000px;
background: green;
}
This is what happens in Safari on iOS 5.0 (4.3 doesn't support position fixed):
The first time I click on one of the anchors the page jumps to the correct anchor. After that I cannot click one of the other links anymore. When I scroll up or down a bit the links become clickable again.
All other desktop browsers behave fine.
Does anyone ever had this issue before or knows how to fix it?
I have that problem aswell. And I kind of half solved it by letting javascript do the scrolling of the nav when a nav anchor is clicked. And because normal touch-scrolling does not give an event until the finger lets go of the screen, I use position:fixed which makes the touch-scrolling nicer than javascript can, see apples dev-site.
It is not the ultimate solution, but in my opinion it is better than not working at all. This script also checks the width of the window to make sure that it only applies this to smaller screens, well, devices.
Here is my code, and if you find it useful, make it better or find a better solution, please share :)
/* NAV POSITION */
var specScroll = false; // If special scrolling is needed
/* Check what kind of position to use.*/
(function navPos() {
var width = checkWidth();
if (width <= 480 || navigator.userAgent.match(/iPad/i) != null) {
specScroll = true;
}else{
specScroll = false;
window.onscroll = NaN;
}
})();
$(window).resize( function(){ navPos(); } ); // After resizing, check what to use again.
/* When clicking one of the nav anchors */
$(function() {
$('a').bind('click',function(e){
var $anchor = $(this);
if(specScroll){
$('#nav').css('position', "absolute");
window.onscroll = anchorScroll;
}
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 700,'easeOutExpo', function(){
if(specScroll){setTimeout("window.onscroll = touchScroll;", 100);}
// the set timeout is needed for not overriding the clickability of the anchors after anchor-scrolling.
});
e.preventDefault();
});
});
/* While the user clicks and anchors in nav */
function anchorScroll() { $('#nav').css('top', window.pageYOffset); }
/* the first time the user scrolls by touch and lift the finger from screen */
function touchScroll() {
$('#nav').css('position', 'fixed');
$('#nav').css('top', 0);
window.onscroll = NaN;
}
/* CHECK WIDTH OF WINDOW */
function checkWidth() {
myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth; //Non-IE
} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
myWidth = document.documentElement.clientWidth; //IE 6+ in 'standards compliant mode'
} else if( document.body && ( document.body.clientWidth ) ) {
myWidth = document.body.clientWidth; //IE 4 compatible
}
return myWidth;
}
I use this solution on a project page, try it out: dare.niklasek.se
I ran into the same issue using a fixed position navigation that scrolls the user around the page using jQuery animation. What I found is that even though the fixed position element is visible at the new position, inspecting it with js reports that it is still back in the original position until the user moves the screen manually. Until then, even though the nav is there visually, it can't be touched in order to interact with it. More information and demo here: http://bit.ly/ios5fixedBug