Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Scrolling Layered Divs

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #234963
    guymeyer
    Participant

    Howdy

    Is there a good solution to this problem?

    I have a few divs all the same size layered on top of one another. The div furthest in the back has scrollable content while the divs in the foreground have a fixed position.

    The problem: This setup won’t allow you to scroll the content within the background div since its being obscured by the foreground divs.

    Normally I’d change the z-index; however in this case the layering cannot be done another way! Any ideas? JS is fine, but I’m hoping for a CSS only solution.

    #234965
    Shikkediel
    Participant

    The quick fix could be to add pointer-events: none to the CSS of the overlaying divs. That’s is, if there are no links in them or anything. Another option would be to ‘redirect’ the mousewheel event. It would be a lot trickier with touch, I suspect that will require quite a bit of code to do right…

    I made a plugin at some point though that could do the job, it’s meant to do a smoothscroll but you could set the tempo (duration) to 1ms.

    http://ataredo.com/morphology/lucidscroll/

    It uses jQuery :

    $(function() {
    
      // you can give all divs on top the below class
    
      $('.overlayingdiv').impulse({
    
        target: $('#background'),
        tempo: 1
      });
    });
    

    Here’s a pen where you could try it out :

    Demo

    $('#container').impulse({
    
      target: $(window),
      tempo: 1,
      propagate: false
    });
    
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.