How to fix a div at the end of a horizontal scroller?
I have a scroller where I add space at the begining (before the first element), and at the end (after the last element) to simulate margins.
I am trying to add a fading effect in the said spacing. Note that I could simply use padding so that items overflowing out of the scroller can't be seen. But my objective is precisely to let them overflow, just with a smooth fading effect, to improve the appearance of the scroller inside of the page.
The problem is that currently, my fading effects move with the items in the scroller (I made them red to make them more obvious) (see below).
But I would like them to stay fixed with the scroller, so that they cover the items that overflow out of the spacing inside of the scroller.
EDIT: Moreover, I would prefer to avoid introducing more html elements.
Thank you for your help.
.scroller::before {
left: 0;
transform: rotate(180deg);
}
.scroller::after {
right: 0;
}
.scroller::before,
.scroller::after {
content: "";
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(to left, red 50%, transparent); /* I set it red for the demo */
}
.scroller {
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow-x: auto;
overflow-y: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 100px !important; /* yeah... */
}
.scroller > :last-child {
position: relative;
}
.scroller > :last-child::after {
content: "";
position: absolute;
right: -100px;
width: 1px;
height: 1px;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>css scroll css-position horizontal-scrolling
asked Nov 18 '18 at 17:47
Romain VincentRomain Vincent
8092719
add a comment |
I have a scroller where I add space at the begining (before the first element), and at the end (after the last element) to simulate margins.
I am trying to add a fading effect in the said spacing. Note that I could simply use padding so that items overflowing out of the scroller can't be seen. But my objective is precisely to let them overflow, just with a smooth fading effect, to improve the appearance of the scroller inside of the page.
The problem is that currently, my fading effects move with the items in the scroller (I made them red to make them more obvious) (see below).
But I would like them to stay fixed with the scroller, so that they cover the items that overflow out of the spacing inside of the scroller.
EDIT: Moreover, I would prefer to avoid introducing more html elements.
Thank you for your help.
.scroller::before {
left: 0;
transform: rotate(180deg);
}
.scroller::after {
right: 0;
}
.scroller::before,
.scroller::after {
content: "";
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(to left, red 50%, transparent); /* I set it red for the demo */
}
.scroller {
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow-x: auto;
overflow-y: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 100px !important; /* yeah... */
}
.scroller > :last-child {
position: relative;
}
.scroller > :last-child::after {
content: "";
position: absolute;
right: -100px;
width: 1px;
height: 1px;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>css scroll css-position horizontal-scrolling
asked Nov 18 '18 at 17:47
Romain VincentRomain Vincent
8092719
add a comment |
I have a scroller where I add space at the begining (before the first element), and at the end (after the last element) to simulate margins.
I am trying to add a fading effect in the said spacing. Note that I could simply use padding so that items overflowing out of the scroller can't be seen. But my objective is precisely to let them overflow, just with a smooth fading effect, to improve the appearance of the scroller inside of the page.
The problem is that currently, my fading effects move with the items in the scroller (I made them red to make them more obvious) (see below).
But I would like them to stay fixed with the scroller, so that they cover the items that overflow out of the spacing inside of the scroller.
EDIT: Moreover, I would prefer to avoid introducing more html elements.
Thank you for your help.
.scroller::before {
left: 0;
transform: rotate(180deg);
}
.scroller::after {
right: 0;
}
.scroller::before,
.scroller::after {
content: "";
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(to left, red 50%, transparent); /* I set it red for the demo */
}
.scroller {
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow-x: auto;
overflow-y: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 100px !important; /* yeah... */
}
.scroller > :last-child {
position: relative;
}
.scroller > :last-child::after {
content: "";
position: absolute;
right: -100px;
width: 1px;
height: 1px;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>css scroll css-position horizontal-scrolling
asked Nov 18 '18 at 17:47
Romain VincentRomain Vincent
8092719
I have a scroller where I add space at the begining (before the first element), and at the end (after the last element) to simulate margins.
I am trying to add a fading effect in the said spacing. Note that I could simply use padding so that items overflowing out of the scroller can't be seen. But my objective is precisely to let them overflow, just with a smooth fading effect, to improve the appearance of the scroller inside of the page.
The problem is that currently, my fading effects move with the items in the scroller (I made them red to make them more obvious) (see below).
But I would like them to stay fixed with the scroller, so that they cover the items that overflow out of the spacing inside of the scroller.
EDIT: Moreover, I would prefer to avoid introducing more html elements.
Thank you for your help.
.scroller::before {
left: 0;
transform: rotate(180deg);
}
.scroller::after {
right: 0;
}
.scroller::before,
.scroller::after {
content: "";
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(to left, red 50%, transparent); /* I set it red for the demo */
}
.scroller {
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow-x: auto;
overflow-y: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 100px !important; /* yeah... */
}
.scroller > :last-child {
position: relative;
}
.scroller > :last-child::after {
content: "";
position: absolute;
right: -100px;
width: 1px;
height: 1px;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>.scroller::before {
left: 0;
transform: rotate(180deg);
}
.scroller::after {
right: 0;
}
.scroller::before,
.scroller::after {
content: "";
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(to left, red 50%, transparent); /* I set it red for the demo */
}
.scroller {
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow-x: auto;
overflow-y: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 100px !important; /* yeah... */
}
.scroller > :last-child {
position: relative;
}
.scroller > :last-child::after {
content: "";
position: absolute;
right: -100px;
width: 1px;
height: 1px;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>.scroller::before {
left: 0;
transform: rotate(180deg);
}
.scroller::after {
right: 0;
}
.scroller::before,
.scroller::after {
content: "";
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(to left, red 50%, transparent); /* I set it red for the demo */
}
.scroller {
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow-x: auto;
overflow-y: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 100px !important; /* yeah... */
}
.scroller > :last-child {
position: relative;
}
.scroller > :last-child::after {
content: "";
position: absolute;
right: -100px;
width: 1px;
height: 1px;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>css scroll css-position horizontal-scrolling
css scroll css-position horizontal-scrolling
asked Nov 18 '18 at 17:47
Romain VincentRomain Vincent
8092719
asked Nov 18 '18 at 17:47
Romain VincentRomain Vincent
8092719
edited Nov 18 '18 at 20:18
Romain Vincent
asked Nov 18 '18 at 17:47
Romain VincentRomain Vincent
8092719
asked Nov 18 '18 at 17:47
Romain VincentRomain Vincent
8092719
asked Nov 18 '18 at 17:47
Romain VincentRomain Vincent
8092719
8092719
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Don't know if it's something you can do, but why not adding an element (like a div) between your cards and your scroller. This container will be the real scroller and its parent, the container, will setup the scroller display style (and its fading effect).
Actually, for now, your :before and :after pseudo-elements are treated like other scroller's children (.card items), so they scroll as well. By creating another level of container that hosts those pseudo-element outside of scroller, you will be able to build a fixed style above this scroller.
/* These 2 first rules are my main concern */
.container::before {
left: 0;
/* this attribute in particular */
background-image: linear-gradient(to right, red, transparent); /* I set it red for the demo */
}
.container::after {
right: 0;
/* this attribute in particular */
background-image: linear-gradient(to left, red, transparent); /* I set it red for the demo */
}
.container::before,
.container::after {
content: "";
position: absolute;
width: 60px;
height: 100%;
z-index: 99
}
/* Next is the necessary set up */
.scroller {
position: relative;
height: 100%;
width: 100%;
display: flex;
overflow-x: auto;
}
.container{
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 60px !important; /* yeah... */
}
.scroller-end {
flex-shrink: 0;
width: 60px;
height: 100%;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="container">
<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="scroller-end"></div>
</div>
</div>answered Nov 18 '18 at 19:16
Alex - DJDBAlex - DJDB
5302516
1
Yes I had tried this solution and it worked fine. But I would prefer to avoid adding more html elements. I have a feeling it's not possible though, since the scroller element itself is moving and most probably nothing inside can stay fixed, except if it si fixed on the page, which of course is even worse. So I will probably accept your answer -- Btw I updated the code because I had failed to transfer my code to the snippet and something didn't work properly, but now it's fixed.
– Romain Vincent
Nov 18 '18 at 20:18
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%2f53363806%2fhow-to-fix-a-div-at-the-end-of-a-horizontal-scroller%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
Don't know if it's something you can do, but why not adding an element (like a div) between your cards and your scroller. This container will be the real scroller and its parent, the container, will setup the scroller display style (and its fading effect).
Actually, for now, your :before and :after pseudo-elements are treated like other scroller's children (.card items), so they scroll as well. By creating another level of container that hosts those pseudo-element outside of scroller, you will be able to build a fixed style above this scroller.
/* These 2 first rules are my main concern */
.container::before {
left: 0;
/* this attribute in particular */
background-image: linear-gradient(to right, red, transparent); /* I set it red for the demo */
}
.container::after {
right: 0;
/* this attribute in particular */
background-image: linear-gradient(to left, red, transparent); /* I set it red for the demo */
}
.container::before,
.container::after {
content: "";
position: absolute;
width: 60px;
height: 100%;
z-index: 99
}
/* Next is the necessary set up */
.scroller {
position: relative;
height: 100%;
width: 100%;
display: flex;
overflow-x: auto;
}
.container{
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 60px !important; /* yeah... */
}
.scroller-end {
flex-shrink: 0;
width: 60px;
height: 100%;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="container">
<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="scroller-end"></div>
</div>
</div>answered Nov 18 '18 at 19:16
Alex - DJDBAlex - DJDB
5302516
1
Yes I had tried this solution and it worked fine. But I would prefer to avoid adding more html elements. I have a feeling it's not possible though, since the scroller element itself is moving and most probably nothing inside can stay fixed, except if it si fixed on the page, which of course is even worse. So I will probably accept your answer -- Btw I updated the code because I had failed to transfer my code to the snippet and something didn't work properly, but now it's fixed.
– Romain Vincent
Nov 18 '18 at 20:18
add a comment |
Don't know if it's something you can do, but why not adding an element (like a div) between your cards and your scroller. This container will be the real scroller and its parent, the container, will setup the scroller display style (and its fading effect).
Actually, for now, your :before and :after pseudo-elements are treated like other scroller's children (.card items), so they scroll as well. By creating another level of container that hosts those pseudo-element outside of scroller, you will be able to build a fixed style above this scroller.
/* These 2 first rules are my main concern */
.container::before {
left: 0;
/* this attribute in particular */
background-image: linear-gradient(to right, red, transparent); /* I set it red for the demo */
}
.container::after {
right: 0;
/* this attribute in particular */
background-image: linear-gradient(to left, red, transparent); /* I set it red for the demo */
}
.container::before,
.container::after {
content: "";
position: absolute;
width: 60px;
height: 100%;
z-index: 99
}
/* Next is the necessary set up */
.scroller {
position: relative;
height: 100%;
width: 100%;
display: flex;
overflow-x: auto;
}
.container{
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 60px !important; /* yeah... */
}
.scroller-end {
flex-shrink: 0;
width: 60px;
height: 100%;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="container">
<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="scroller-end"></div>
</div>
</div>answered Nov 18 '18 at 19:16
Alex - DJDBAlex - DJDB
5302516
1
Yes I had tried this solution and it worked fine. But I would prefer to avoid adding more html elements. I have a feeling it's not possible though, since the scroller element itself is moving and most probably nothing inside can stay fixed, except if it si fixed on the page, which of course is even worse. So I will probably accept your answer -- Btw I updated the code because I had failed to transfer my code to the snippet and something didn't work properly, but now it's fixed.
– Romain Vincent
Nov 18 '18 at 20:18
add a comment |
Don't know if it's something you can do, but why not adding an element (like a div) between your cards and your scroller. This container will be the real scroller and its parent, the container, will setup the scroller display style (and its fading effect).
Actually, for now, your :before and :after pseudo-elements are treated like other scroller's children (.card items), so they scroll as well. By creating another level of container that hosts those pseudo-element outside of scroller, you will be able to build a fixed style above this scroller.
/* These 2 first rules are my main concern */
.container::before {
left: 0;
/* this attribute in particular */
background-image: linear-gradient(to right, red, transparent); /* I set it red for the demo */
}
.container::after {
right: 0;
/* this attribute in particular */
background-image: linear-gradient(to left, red, transparent); /* I set it red for the demo */
}
.container::before,
.container::after {
content: "";
position: absolute;
width: 60px;
height: 100%;
z-index: 99
}
/* Next is the necessary set up */
.scroller {
position: relative;
height: 100%;
width: 100%;
display: flex;
overflow-x: auto;
}
.container{
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 60px !important; /* yeah... */
}
.scroller-end {
flex-shrink: 0;
width: 60px;
height: 100%;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="container">
<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="scroller-end"></div>
</div>
</div>answered Nov 18 '18 at 19:16
Alex - DJDBAlex - DJDB
5302516
Don't know if it's something you can do, but why not adding an element (like a div) between your cards and your scroller. This container will be the real scroller and its parent, the container, will setup the scroller display style (and its fading effect).
Actually, for now, your :before and :after pseudo-elements are treated like other scroller's children (.card items), so they scroll as well. By creating another level of container that hosts those pseudo-element outside of scroller, you will be able to build a fixed style above this scroller.
/* These 2 first rules are my main concern */
.container::before {
left: 0;
/* this attribute in particular */
background-image: linear-gradient(to right, red, transparent); /* I set it red for the demo */
}
.container::after {
right: 0;
/* this attribute in particular */
background-image: linear-gradient(to left, red, transparent); /* I set it red for the demo */
}
.container::before,
.container::after {
content: "";
position: absolute;
width: 60px;
height: 100%;
z-index: 99
}
/* Next is the necessary set up */
.scroller {
position: relative;
height: 100%;
width: 100%;
display: flex;
overflow-x: auto;
}
.container{
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 60px !important; /* yeah... */
}
.scroller-end {
flex-shrink: 0;
width: 60px;
height: 100%;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="container">
<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="scroller-end"></div>
</div>
</div>/* These 2 first rules are my main concern */
.container::before {
left: 0;
/* this attribute in particular */
background-image: linear-gradient(to right, red, transparent); /* I set it red for the demo */
}
.container::after {
right: 0;
/* this attribute in particular */
background-image: linear-gradient(to left, red, transparent); /* I set it red for the demo */
}
.container::before,
.container::after {
content: "";
position: absolute;
width: 60px;
height: 100%;
z-index: 99
}
/* Next is the necessary set up */
.scroller {
position: relative;
height: 100%;
width: 100%;
display: flex;
overflow-x: auto;
}
.container{
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 60px !important; /* yeah... */
}
.scroller-end {
flex-shrink: 0;
width: 60px;
height: 100%;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="container">
<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="scroller-end"></div>
</div>
</div>/* These 2 first rules are my main concern */
.container::before {
left: 0;
/* this attribute in particular */
background-image: linear-gradient(to right, red, transparent); /* I set it red for the demo */
}
.container::after {
right: 0;
/* this attribute in particular */
background-image: linear-gradient(to left, red, transparent); /* I set it red for the demo */
}
.container::before,
.container::after {
content: "";
position: absolute;
width: 60px;
height: 100%;
z-index: 99
}
/* Next is the necessary set up */
.scroller {
position: relative;
height: 100%;
width: 100%;
display: flex;
overflow-x: auto;
}
.container{
position: relative;
width: 100%;
max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
height: 230px;
overflow: hidden;
background-color: #DEDEDE;
display: flex;
}
.scroller > :first-child {
margin-left: 60px !important; /* yeah... */
}
.scroller-end {
flex-shrink: 0;
width: 60px;
height: 100%;
visibility: hidden;
}
.scroller > .card {
flex-shrink: 0;
width: 260px;
height: calc(100% - 2 * 15px);
margin: 15px;
background-color: white;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #323235;
}<div class="container">
<div class="scroller">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="scroller-end"></div>
</div>
</div>answered Nov 18 '18 at 19:16
Alex - DJDBAlex - DJDB
5302516
edited Nov 18 '18 at 19:38
answered Nov 18 '18 at 19:16
Alex - DJDBAlex - DJDB
5302516
answered Nov 18 '18 at 19:16
Alex - DJDBAlex - DJDB
5302516
answered Nov 18 '18 at 19:16
Alex - DJDBAlex - DJDB
5302516
5302516
1
Yes I had tried this solution and it worked fine. But I would prefer to avoid adding more html elements. I have a feeling it's not possible though, since the scroller element itself is moving and most probably nothing inside can stay fixed, except if it si fixed on the page, which of course is even worse. So I will probably accept your answer -- Btw I updated the code because I had failed to transfer my code to the snippet and something didn't work properly, but now it's fixed.
– Romain Vincent
Nov 18 '18 at 20:18
add a comment |
1
Yes I had tried this solution and it worked fine. But I would prefer to avoid adding more html elements. I have a feeling it's not possible though, since the scroller element itself is moving and most probably nothing inside can stay fixed, except if it si fixed on the page, which of course is even worse. So I will probably accept your answer -- Btw I updated the code because I had failed to transfer my code to the snippet and something didn't work properly, but now it's fixed.
– Romain Vincent
Nov 18 '18 at 20:18
1
1
Yes I had tried this solution and it worked fine. But I would prefer to avoid adding more html elements. I have a feeling it's not possible though, since the scroller element itself is moving and most probably nothing inside can stay fixed, except if it si fixed on the page, which of course is even worse. So I will probably accept your answer -- Btw I updated the code because I had failed to transfer my code to the snippet and something didn't work properly, but now it's fixed.
– Romain Vincent
Nov 18 '18 at 20:18
Yes I had tried this solution and it worked fine. But I would prefer to avoid adding more html elements. I have a feeling it's not possible though, since the scroller element itself is moving and most probably nothing inside can stay fixed, except if it si fixed on the page, which of course is even worse. So I will probably accept your answer -- Btw I updated the code because I had failed to transfer my code to the snippet and something didn't work properly, but now it's fixed.
– Romain Vincent
Nov 18 '18 at 20:18
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%2f53363806%2fhow-to-fix-a-div-at-the-end-of-a-horizontal-scroller%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
