Forums

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

Home Forums CSS Overflow problem

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #45651
    BigBadWolf
    Participant

    In my CSS my body has an overflow:hidden; condition. Which works fine on all pages.

    The problem is one of the pages in the website has a div with an overflow:scroll and i want to be able to scroll the content in that div. Due to the hidden property in the body I cannot scroll the content from the div. Any suggestions how I can work around it?

    I know I could just specify that the body on this page does not have an overflow hidden property but that will screw up other elements on the page.

    #139292
    Paulie_D
    Member

    Not sure why you can’t scroll that div.

    Have you tried overriding anything with higher specificity by using `!important`?

    A link would be helpful and an indication of which div is causing you trouble.

    Is there a reason why you are not allowing the body to overflow?

    #139301
    BigBadWolf
    Participant

    I tried using the !important property but no luck

    here is a link to the page in question.

    https://dl.dropboxusercontent.com/u/68249003/CSSTricksproblemWeb/Games.html

    #139303
    Paulie_D
    Member

    Yes, I see…

    >Is there a reason why you are not allowing the body to overflow?

    Is there a particular issue to are trying to avoid or an effect you are trying to achieve?

    #139305
    BigBadWolf
    Participant

    yes If I remove the body overflow the background will not remain fixed.

    #139307
    BigBadWolf
    Participant

    Even when I remove the overflow hidden property from the body the div still doesn’t scroll :/

    #139309
    BigBadWolf
    Participant

    https://dl.dropboxusercontent.com/u/68249003/CSSTricksproblemWeb/Games.html

    I updated it. It’s know as it should be the background is a URL background property in the body.

    #139310
    pixelgrid
    Participant

    use background-attachment:fixed on your body and remove the overflow property

    #139312
    Paulie_D
    Member

    @pixelgrid Ahhh…thank you….I knew there was something.

    Once that’s been done, remove all of the overflow properties from the various divs etc and there you are.

    #139314
    BigBadWolf
    Participant

    still doesn’t solve the problem :/ even when I remove the overflow property completely from the body it still does not work. I don’t know what is screwing up what.

    #139316
    Paulie_D
    Member

    Remove these:

    div.page-wrap {
    overflow-y: hidden; <====
    }

    div.gamesTab {
    overflow-y: scroll !important; <====
    }

    #139324
    BigBadWolf
    Participant

    Although it makes the page scrollable I want to be able to scroll only the inside div element heh. It doesn’t make sense that the div is not scrollable.

    #139329
    David_Leitch
    Participant

    I think what you want to be doing is something like [this](http://codepen.io/David_Leitch/pen/iDovIhttp://codepen.io/David_Leitch/pen/iDovI&#8221;), where the body is 100% of the browser and has the background attached to that, so that the content scrolls, but the background does not.

    #139334
    Sarfaraj
    Participant

    replace this code in your css. I have tried that’s great working.

    body {
    background-size: 100% 100%;
    background-size: contain;
    background: url(‘sky.png’) no-repeat;
    background-attachment: fixed;
    }
    div.gamesTab {
    width: 100%;
    height: auto;
    position: relative;
    top: -10%;
    }

    #139336
    BigBadWolf
    Participant

    @Sarfaraj thanks a lot it works know :) Thanks everyone for the helpful suggestions :)

Viewing 15 posts - 1 through 15 (of 19 total)
  • The forum ‘CSS’ is closed to new topics and replies.