Kevin Powell - Community•15mo ago

Hover settimeout

Is it possible to make a component scrollable(overflow:hidden to scroll) after 2seconds of hovering ? transition really doesnt work

24 Replies

Jochem•15mo ago

not without javascript

let timer;

const target = document.querySelector('.target');

target.addEventListener('mouseover', () => {
  timer = setTimeout(() => {
    target.classList.add('scrollable')
  }, 2000);
});

target.addEventListener('mouseout', () => {
  clearTimeout(timer);
  target.classList.remove('scrollable');
});

let timer;

const target = document.querySelector('.target');

target.addEventListener('mouseover', () => {
  timer = setTimeout(() => {
    target.classList.add('scrollable')
  }, 2000);
});

target.addEventListener('mouseout', () => {
  clearTimeout(timer);
  target.classList.remove('scrollable');
});

ἔρως•15mo ago

it is animatable, so, you should be able to set an animation that has a 2s delay and a count of 1

Jochem•15mo ago

transition-delay isn't applying to overflow in my testing :hover triggers the scroll instantly, and other properties after a 2 second delay

Jochem•15mo ago

https://codepen.io/jochemm/pen/zYyZxLa?editors=1100 I'd love to be proved wrong, I'm probably just missing something

Jochem

CodePen

zYyZxLa

...

ἔρως•15mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow <-- it's weird, because this says it should work

overflow - CSS: Cascading Style Sheets | MDN

The overflow CSS shorthand property sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction.

ἔρως•15mo ago

i can't get it to work either i have an idea I DID IT!!!!!!

div {
  overflow: auto;
  max-height: 150px;
  background: red;
}

div > div {
  overflow: hidden;
  max-height: 150px;
}

div:hover > div {
  max-height: 9999px;
  transition: max-height 0s ease-in-out;
  transition-delay: 2s;
}

div {
  overflow: auto;
  max-height: 150px;
  background: red;
}

div > div {
  overflow: hidden;
  max-height: 150px;
}

div:hover > div {
  max-height: 9999px;
  transition: max-height 0s ease-in-out;
  transition-delay: 2s;
}

so, the 9999px is what makes it work it sets the max-height as basically "big enough" this is an hack, but it works if you want "completely infinite", you can use 9999cm instead the max-height must be equal on both

ἔρως•15mo ago

https://jsfiddle.net/fhgc7nev/ <-- here's it working, with 9999cm

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Jochem•15mo ago

ooh, so you fake animating the overflow by using a second div that has the overflow, clever!

ἔρως•15mo ago

and use a transition on that 2nd div this could probably be faked with a clip-path but it's too much for my brain

Jochem•15mo ago

it's a pretty elegant solution like this, actually

ἔρως•15mo ago

i feel dirty using 9999cm, but it works however, if you have an element that's 9999cm high, you should stop

Jochem•15mo ago

haha, yeah, definitely

ἔρως•15mo ago

lets see what he does with this hacked hack

Choo♚𝕂𝕚𝕟𝕘•15mo ago

.target:hover {
  color: red;
  animation: scroll-delay 2s;
}
@keyframes scroll-delay{
  from{
    overflow: hidden;
  }
  to{
    overflow: scroll;
  }
}

.target:hover {
  color: red;
  animation: scroll-delay 2s;
}
@keyframes scroll-delay{
  from{
    overflow: hidden;
  }
  to{
    overflow: scroll;
  }
}

This change to your code works. The overflow can't be animated in the sense of gradual transition, but it does work as a sudden change. It's the same for something like display: none to display: block. That works as an instantaneous change instead of gradual.

ἔρως•15mo ago

i couldnt get that to work for some reason

Jochem•15mo ago

it works, but with a couple of caveats. It switches at 1 second (50%), and if you don't add forwards to the animation, it'll reset a bit later

Choo♚𝕂𝕚𝕟𝕘•15mo ago

I don't know what code you are trying. Here is a demo of Jochem's code with my modifcation. https://codepen.io/chooking/pen/WNLpvpd

ChooKing

CodePen

Hover scroll delay

...

Choo♚𝕂𝕚𝕟𝕘•15mo ago

I forgot about that.

Jochem•15mo ago

very nice solution though!

Choo♚𝕂𝕚𝕟𝕘•15mo ago

So make it 4s forwards.

Jochem•15mo ago

yup (with a comment for future you / colleagues) alternatively, add 0%, 99%, and 100% keyframes with the first two at overflow: hidden; or, even better

  animation: scroll-delay 2s forwards step-end;

  animation: scroll-delay 2s forwards step-end;

ἔρως•15mo ago

that works and you now only need the 100% animation

.target {
  width: 200px;
  height: 200px;
  overflow: hidden;
  color: green;
}

.target:hover {
  animation: scroll-delay 2s forwards step-end;
}
@keyframes scroll-delay{
  to {
    overflow: scroll;
  }
}

.target {
  width: 200px;
  height: 200px;
  overflow: hidden;
  color: green;
}

.target:hover {
  animation: scroll-delay 2s forwards step-end;
}
@keyframes scroll-delay{
  to {
    overflow: scroll;
  }
}

this worked for me but hey, this went from "it's impossible without javascript" to "here's a 9999cm div" to "here's the best version of it"

Jochem•15mo ago

collaboration for the win \o/ also shows why you shouldn't listen to a backend dev about CSS it's me, I'm the backend dev

ἔρως•15mo ago

i am the everything dev

Gaming

Programming

Hover settimeout