Scroll only the modal
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I made a Modal with a set height and width.
When I click the button to open the Modal, a new class (.modal-open) is added to the BODY tag. Now the BODY is not able to scroll. That's what I wanted, no problems.
.modal-open {
overflow: hidden;
}
What I'm trying to do now is what I can't figure it out.
I wanted to block the body to scroll AND don't set a height property for the Modal, so I could scroll the content of the Modal without the Y scroll. Like this:
What I could do to be able to scroll the entire content of the Modal and don't get stuck?
Here it is my CSS Modal class:
.my-modal {
background-color: $color-ink;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
&__content {
position: fixed;
// overflow-y: scroll;
top: 20%;
left: 50vw;
transform: translateX(-50%);
border-radius: 5px;
max-width: 60rem;
// height: 50vh;
}
}
css
asked Nov 16 '18 at 16:09
extraxtextraxt
689
add a comment |
I made a Modal with a set height and width.
When I click the button to open the Modal, a new class (.modal-open) is added to the BODY tag. Now the BODY is not able to scroll. That's what I wanted, no problems.
.modal-open {
overflow: hidden;
}
What I'm trying to do now is what I can't figure it out.
I wanted to block the body to scroll AND don't set a height property for the Modal, so I could scroll the content of the Modal without the Y scroll. Like this:
What I could do to be able to scroll the entire content of the Modal and don't get stuck?
Here it is my CSS Modal class:
.my-modal {
background-color: $color-ink;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
&__content {
position: fixed;
// overflow-y: scroll;
top: 20%;
left: 50vw;
transform: translateX(-50%);
border-radius: 5px;
max-width: 60rem;
// height: 50vh;
}
}
css
asked Nov 16 '18 at 16:09
extraxtextraxt
689
SOLVED: I was taking away the overflow from the entire Body of my page with my class so even the content of the modal was not scrollable anymore. So I added a new util class to the background of my modal withoverflow-y: scroll !importantand removed the propertiesoverflow-yandheightof the content, as it is in my question above.
– extraxt
Nov 17 '18 at 21:59
add a comment |
I made a Modal with a set height and width.
When I click the button to open the Modal, a new class (.modal-open) is added to the BODY tag. Now the BODY is not able to scroll. That's what I wanted, no problems.
.modal-open {
overflow: hidden;
}
What I'm trying to do now is what I can't figure it out.
I wanted to block the body to scroll AND don't set a height property for the Modal, so I could scroll the content of the Modal without the Y scroll. Like this:
What I could do to be able to scroll the entire content of the Modal and don't get stuck?
Here it is my CSS Modal class:
.my-modal {
background-color: $color-ink;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
&__content {
position: fixed;
// overflow-y: scroll;
top: 20%;
left: 50vw;
transform: translateX(-50%);
border-radius: 5px;
max-width: 60rem;
// height: 50vh;
}
}
css
asked Nov 16 '18 at 16:09
extraxtextraxt
689
I made a Modal with a set height and width.
When I click the button to open the Modal, a new class (.modal-open) is added to the BODY tag. Now the BODY is not able to scroll. That's what I wanted, no problems.
.modal-open {
overflow: hidden;
}
What I'm trying to do now is what I can't figure it out.
I wanted to block the body to scroll AND don't set a height property for the Modal, so I could scroll the content of the Modal without the Y scroll. Like this:
What I could do to be able to scroll the entire content of the Modal and don't get stuck?
Here it is my CSS Modal class:
.my-modal {
background-color: $color-ink;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
&__content {
position: fixed;
// overflow-y: scroll;
top: 20%;
left: 50vw;
transform: translateX(-50%);
border-radius: 5px;
max-width: 60rem;
// height: 50vh;
}
}
css
css
asked Nov 16 '18 at 16:09
extraxtextraxt
689
asked Nov 16 '18 at 16:09
extraxtextraxt
689
asked Nov 16 '18 at 16:09
extraxtextraxt
689
asked Nov 16 '18 at 16:09
extraxtextraxt
689
asked Nov 16 '18 at 16:09
extraxtextraxt
689
689
SOLVED: I was taking away the overflow from the entire Body of my page with my class so even the content of the modal was not scrollable anymore. So I added a new util class to the background of my modal withoverflow-y: scroll !importantand removed the propertiesoverflow-yandheightof the content, as it is in my question above.
– extraxt
Nov 17 '18 at 21:59
add a comment |
SOLVED: I was taking away the overflow from the entire Body of my page with my class so even the content of the modal was not scrollable anymore. So I added a new util class to the background of my modal withoverflow-y: scroll !importantand removed the propertiesoverflow-yandheightof the content, as it is in my question above.
– extraxt
Nov 17 '18 at 21:59
SOLVED: I was taking away the overflow from the entire Body of my page with my class so even the content of the modal was not scrollable anymore. So I added a new util class to the background of my modal with
overflow-y: scroll !important and removed the properties overflow-y and height of the content, as it is in my question above.– extraxt
Nov 17 '18 at 21:59
SOLVED: I was taking away the overflow from the entire Body of my page with my class so even the content of the modal was not scrollable anymore. So I added a new util class to the background of my modal with
overflow-y: scroll !important and removed the properties overflow-y and height of the content, as it is in my question above.– extraxt
Nov 17 '18 at 21:59
add a comment |
1 Answer
1
active
oldest
votes
It's difficult to know for sure without seeing the rest of your code. But assuming the Content element is INSIDE the my-modal you should use position: absolute instead of fixed for the inner one.
Position fixed produces strange effects as its tied to the body in ways that position absolute isn't. Absolute references the next explicitly positioned parent element in the stack so your placement should remain unchanged.
After you do that, height and overflow-y on the content should produce the effect you're expecting.
answered Nov 16 '18 at 16:53
Bryce HowitsonBryce Howitson
1,459516
Hi, Bryce. After I posted here, I changed to 'absolute' just to try things. It worked the same but better, like you said. But the freezing effect keeps in. Thank you for your anwser!
– extraxt
Nov 16 '18 at 19:58
When you say "freezing", does that mean that the scroll works but seems to lag or stick sometimes? That sounds like a different issue most likely a browser memory thing. Do you have a bunch of tabs open or a lot of CSS transforms happening?
– Bryce Howitson
Nov 16 '18 at 22:14
Sorry for the description. I mean, in the <body> I add the .modal-open class (overflow: hidden), then nothing scrolls. So I tryed to don't add the overflow: hidden to the body tag. Now I can see the scroll in the entire page but the content of the Modal keeps fixed (even when absolute is the property I'm using). *Edit: now I think that I know why: my-modal (parent node) got the property 'fixed' himself, so obviously the content of the modal is going to stay absolute to the parent fixed. Maybe if I take the content from the inside of the my-modal node, and work with Z-Indexes... I'll try.
– extraxt
Nov 17 '18 at 15:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53341567%2fscroll-only-the-modal%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It's difficult to know for sure without seeing the rest of your code. But assuming the Content element is INSIDE the my-modal you should use position: absolute instead of fixed for the inner one.
Position fixed produces strange effects as its tied to the body in ways that position absolute isn't. Absolute references the next explicitly positioned parent element in the stack so your placement should remain unchanged.
After you do that, height and overflow-y on the content should produce the effect you're expecting.
answered Nov 16 '18 at 16:53
Bryce HowitsonBryce Howitson
1,459516
Hi, Bryce. After I posted here, I changed to 'absolute' just to try things. It worked the same but better, like you said. But the freezing effect keeps in. Thank you for your anwser!
– extraxt
Nov 16 '18 at 19:58
When you say "freezing", does that mean that the scroll works but seems to lag or stick sometimes? That sounds like a different issue most likely a browser memory thing. Do you have a bunch of tabs open or a lot of CSS transforms happening?
– Bryce Howitson
Nov 16 '18 at 22:14
Sorry for the description. I mean, in the <body> I add the .modal-open class (overflow: hidden), then nothing scrolls. So I tryed to don't add the overflow: hidden to the body tag. Now I can see the scroll in the entire page but the content of the Modal keeps fixed (even when absolute is the property I'm using). *Edit: now I think that I know why: my-modal (parent node) got the property 'fixed' himself, so obviously the content of the modal is going to stay absolute to the parent fixed. Maybe if I take the content from the inside of the my-modal node, and work with Z-Indexes... I'll try.
– extraxt
Nov 17 '18 at 15:57
add a comment |
It's difficult to know for sure without seeing the rest of your code. But assuming the Content element is INSIDE the my-modal you should use position: absolute instead of fixed for the inner one.
Position fixed produces strange effects as its tied to the body in ways that position absolute isn't. Absolute references the next explicitly positioned parent element in the stack so your placement should remain unchanged.
After you do that, height and overflow-y on the content should produce the effect you're expecting.
answered Nov 16 '18 at 16:53
Bryce HowitsonBryce Howitson
1,459516
Hi, Bryce. After I posted here, I changed to 'absolute' just to try things. It worked the same but better, like you said. But the freezing effect keeps in. Thank you for your anwser!
– extraxt
Nov 16 '18 at 19:58
When you say "freezing", does that mean that the scroll works but seems to lag or stick sometimes? That sounds like a different issue most likely a browser memory thing. Do you have a bunch of tabs open or a lot of CSS transforms happening?
– Bryce Howitson
Nov 16 '18 at 22:14
Sorry for the description. I mean, in the <body> I add the .modal-open class (overflow: hidden), then nothing scrolls. So I tryed to don't add the overflow: hidden to the body tag. Now I can see the scroll in the entire page but the content of the Modal keeps fixed (even when absolute is the property I'm using). *Edit: now I think that I know why: my-modal (parent node) got the property 'fixed' himself, so obviously the content of the modal is going to stay absolute to the parent fixed. Maybe if I take the content from the inside of the my-modal node, and work with Z-Indexes... I'll try.
– extraxt
Nov 17 '18 at 15:57
add a comment |
It's difficult to know for sure without seeing the rest of your code. But assuming the Content element is INSIDE the my-modal you should use position: absolute instead of fixed for the inner one.
Position fixed produces strange effects as its tied to the body in ways that position absolute isn't. Absolute references the next explicitly positioned parent element in the stack so your placement should remain unchanged.
After you do that, height and overflow-y on the content should produce the effect you're expecting.
answered Nov 16 '18 at 16:53
Bryce HowitsonBryce Howitson
1,459516
It's difficult to know for sure without seeing the rest of your code. But assuming the Content element is INSIDE the my-modal you should use position: absolute instead of fixed for the inner one.
Position fixed produces strange effects as its tied to the body in ways that position absolute isn't. Absolute references the next explicitly positioned parent element in the stack so your placement should remain unchanged.
After you do that, height and overflow-y on the content should produce the effect you're expecting.
answered Nov 16 '18 at 16:53
Bryce HowitsonBryce Howitson
1,459516
answered Nov 16 '18 at 16:53
Bryce HowitsonBryce Howitson
1,459516
answered Nov 16 '18 at 16:53
Bryce HowitsonBryce Howitson
1,459516
answered Nov 16 '18 at 16:53
Bryce HowitsonBryce Howitson
1,459516
1,459516
Hi, Bryce. After I posted here, I changed to 'absolute' just to try things. It worked the same but better, like you said. But the freezing effect keeps in. Thank you for your anwser!
– extraxt
Nov 16 '18 at 19:58
When you say "freezing", does that mean that the scroll works but seems to lag or stick sometimes? That sounds like a different issue most likely a browser memory thing. Do you have a bunch of tabs open or a lot of CSS transforms happening?
– Bryce Howitson
Nov 16 '18 at 22:14
Sorry for the description. I mean, in the <body> I add the .modal-open class (overflow: hidden), then nothing scrolls. So I tryed to don't add the overflow: hidden to the body tag. Now I can see the scroll in the entire page but the content of the Modal keeps fixed (even when absolute is the property I'm using). *Edit: now I think that I know why: my-modal (parent node) got the property 'fixed' himself, so obviously the content of the modal is going to stay absolute to the parent fixed. Maybe if I take the content from the inside of the my-modal node, and work with Z-Indexes... I'll try.
– extraxt
Nov 17 '18 at 15:57
add a comment |
Hi, Bryce. After I posted here, I changed to 'absolute' just to try things. It worked the same but better, like you said. But the freezing effect keeps in. Thank you for your anwser!
– extraxt
Nov 16 '18 at 19:58
When you say "freezing", does that mean that the scroll works but seems to lag or stick sometimes? That sounds like a different issue most likely a browser memory thing. Do you have a bunch of tabs open or a lot of CSS transforms happening?
– Bryce Howitson
Nov 16 '18 at 22:14
Sorry for the description. I mean, in the <body> I add the .modal-open class (overflow: hidden), then nothing scrolls. So I tryed to don't add the overflow: hidden to the body tag. Now I can see the scroll in the entire page but the content of the Modal keeps fixed (even when absolute is the property I'm using). *Edit: now I think that I know why: my-modal (parent node) got the property 'fixed' himself, so obviously the content of the modal is going to stay absolute to the parent fixed. Maybe if I take the content from the inside of the my-modal node, and work with Z-Indexes... I'll try.
– extraxt
Nov 17 '18 at 15:57
Hi, Bryce. After I posted here, I changed to 'absolute' just to try things. It worked the same but better, like you said. But the freezing effect keeps in. Thank you for your anwser!
– extraxt
Nov 16 '18 at 19:58
Hi, Bryce. After I posted here, I changed to 'absolute' just to try things. It worked the same but better, like you said. But the freezing effect keeps in. Thank you for your anwser!
– extraxt
Nov 16 '18 at 19:58
When you say "freezing", does that mean that the scroll works but seems to lag or stick sometimes? That sounds like a different issue most likely a browser memory thing. Do you have a bunch of tabs open or a lot of CSS transforms happening?
– Bryce Howitson
Nov 16 '18 at 22:14
When you say "freezing", does that mean that the scroll works but seems to lag or stick sometimes? That sounds like a different issue most likely a browser memory thing. Do you have a bunch of tabs open or a lot of CSS transforms happening?
– Bryce Howitson
Nov 16 '18 at 22:14
Sorry for the description. I mean, in the <body> I add the .modal-open class (overflow: hidden), then nothing scrolls. So I tryed to don't add the overflow: hidden to the body tag. Now I can see the scroll in the entire page but the content of the Modal keeps fixed (even when absolute is the property I'm using). *Edit: now I think that I know why: my-modal (parent node) got the property 'fixed' himself, so obviously the content of the modal is going to stay absolute to the parent fixed. Maybe if I take the content from the inside of the my-modal node, and work with Z-Indexes... I'll try.
– extraxt
Nov 17 '18 at 15:57
Sorry for the description. I mean, in the <body> I add the .modal-open class (overflow: hidden), then nothing scrolls. So I tryed to don't add the overflow: hidden to the body tag. Now I can see the scroll in the entire page but the content of the Modal keeps fixed (even when absolute is the property I'm using). *Edit: now I think that I know why: my-modal (parent node) got the property 'fixed' himself, so obviously the content of the modal is going to stay absolute to the parent fixed. Maybe if I take the content from the inside of the my-modal node, and work with Z-Indexes... I'll try.
– extraxt
Nov 17 '18 at 15:57
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53341567%2fscroll-only-the-modal%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
SOLVED: I was taking away the overflow from the entire Body of my page with my class so even the content of the modal was not scrollable anymore. So I added a new util class to the background of my modal with
overflow-y: scroll !importantand removed the propertiesoverflow-yandheightof the content, as it is in my question above.– extraxt
Nov 17 '18 at 21:59