How can I move the scroll bar from the default right side of the screen to within a container/div? Using div style="height: 1000px; overflow-y: scroll;" i was able to create a new scroll bar for that container but there still is an outside default scroll bar that scrolls some of the div as well so each scroll bar basically scrolls half the screen. I only want the inner div to be what holds the scroll bar
CodePudding user response：
Have you tried setting overflow to hidden on the outside container?
<div style="overflow: hidden;">
<ul style="height: 50px; overflow: auto;">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</div>If an element has a scrollbar, it simply means the content is bigger than the element's height.
overflow: hidden simply hides the scrollbar but you won't be able to scroll and so any content past the element will be cut off.
Point is, if the outer box holds all the content, you can't just make a smaller box inside and let that do the scrolling.
CodePudding user response：
You can't tell an element (e.g: <body>) to place its scrollbar into another element. Each element has its own scrollbars, which are independent of each other. So if you don't want scrollbars on body, you either:
- forbid scrolling (bad): give it
overflow-y: hidden. This has the disadvantage of making content unaccessible, by cutting off whatever doesn't fit the current height of the element - or make sure the sum of its children's sizes is not bigger than the available space (good). In your case, you have to limit the vertical size of the
<body>(or a.container) to100vh.
Here's an example, using display: grid:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header,
footer {
box-shadow: 0 1px 8px 0 rgb(0 0 0 / 10%), 0 3px 4px 0 rgb(0 0 0 / 7%), 0 3px 3px -2px rgb(0 0 0 / 6%);
position: relative;
}
.container .main {
background-color: #f5f5f5;
overflow-y: auto;
max-width: 600px;
margin: 0 auto;
/* optional: */
min-height: 10rem;
}
/* this is optional */
.box {
padding: 1rem;
max-width: 600px;
margin: 0 auto;
border: solid #eee;
border-width: 0 1px;
}
.main .box {
margin-left: 15px;
}<div >
<header>
<div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue
non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
</div>
</header>
<div >
<div >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</div>
<footer>
<div >
Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus,
ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus
nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</footer>So what's going on?
I placed three children in the container: <header>, .main and <footer>. Using grid-template-rows, I've instructed the grid to allow header and footer to take up whatever they need and give all the remaining space to .main.
This solution runs the risk that .main remains without enough height if header and footer sum up to the entire height.
To fix this problem, you might want to set a min-height on .main, but this will create the second scrollbar on narrow devices, which we want to avoid.
Another fix for this problem is to remove the height restriction of .container on those devices (thus moving the scrollbar back to .container). Example:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header, footer {
box-shadow: 0 1px 8px 0 rgb(0 0 0 / 10%), 0 3px 4px 0 rgb(0 0 0 / 7%), 0 3px 3px -2px rgb(0 0 0 / 6%);
position: relative;
padding-right: 15px;
}
.container .main {
background-color: #f5f5f5;
overflow-y: auto;
}
@media (max-width: 768px) {
.container {
height: auto;
}
header, footer {
padding-right: 0;
}
}
/* this is optional */
.box {
padding: 1rem;
max-width: 600px;
margin: 0 auto;
}<div >
<header>
<div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue
non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
</div>
</header>
<div >
<div >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</div>
<footer>
<div >
Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus,
ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus
nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</footer>
</div>