CSS - how to scroll a list in a div

Question

How can I scroll only the list? I want the .text and the .link-item to be fixed and only scroll on the list inside the container.

.container {
  position: relative;
  float: right;
  width: 74.4%;
  height: 150px;
  background-color: rgb(230, 230, 233);
  margin-top: 30px;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  text-align: left;
  border-radius: 4px;
}

.text {
  position: fixed;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  color: rgb(116, 124, 142);
  float: left;
  padding: 10px 0px 0px 40px;
}

.box {
  position: absolute;
  padding: 20px 50px 0px 30px;
  color: rgb(116, 124, 142);
  font-size: 15px;
}

.link-item {
  position: absolute;
  top: 15px;
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  color: rgb(87, 135, 253);
  text-align: right;
  padding-right: 40px;
  text-decoration: none;
}

<div class="container">
  <div class="text">ACTION ITEMS</div>
  <div class="box">
    <ul>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
    </ul>
  </div>
  <a href="www.something.com" class="link-item">GO TO THE LAST ITEM</a>
</div>

Hey Liz. I was downvoted twice for answering the "GO TO THE LAST ITEM" part. Not sure if I deserve the downvotes. Also, I made the right way to use the scrolling part as well. Can you kindly clarify if I am wrong in this case? Thanks. — Soolie
– Soolie, Commented Nov 20, 2017 at 18:49

Soolie · Accepted Answer · 2017-11-20 18:53:26Z

5

Note: Along with the CSS part, I have also answered the GO TO THE LAST ITEM. Not sure why this can be done just by using CSS alone, as GO TO THE LAST ITEM needs JavaScript. I am just concerned because my answer has been downvoted so added this note.

You cannot use just CSS for implementing the GO TO THE LAST ITEM. Add the overflow CSS and you need to use JavaScript to make it scroll to the bottom:

document.querySelector('.box').scrollTop = 1000;

.container {
  position: relative;
  float: right;
  width: 74.4%;
  height: 150px;
  background-color: rgb(230, 230, 233);
  margin-top: 30px;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  text-align: left;
  border-radius: 4px;
}

.text {
  position: fixed;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  color: rgb(116, 124, 142);
  float: left;
  padding: 10px 0px 0px 40px;
}

.box {
  position: absolute;
  padding: 20px 50px 0px 30px;
  color: rgb(116, 124, 142);
  font-size: 15px;
  overflow: auto;
  height: 100px;
}

.link-item {
  position: absolute;
  top: 15px;
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  color: rgb(87, 135, 253);
  text-align: right;
  padding-right: 40px;
  text-decoration: none;
}

<div class="container">
  <div class="text">ACTION ITEMS</div>
  <div class="box">
    <ul>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
    </ul>
  </div>
  <a href="www.something.com" class="link-item" onclick="document.querySelector('.box').scrollTop = 10000; return false;">GO TO THE LAST ITEM</a>
</div>

edited Nov 20, 2017 at 18:53

answered Nov 20, 2017 at 18:46

Soolie

1,77211 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Nkole Evans Over a year ago

The CSS property overflow-y: scroll is meant to do exactly this, no need of JavaScript.

Nkole Evans Over a year ago

@Soolie Oh sorry I did'nt see the go to the last item past. That DOES require JavaScript. Sorry for the oversight.

Xantium Over a year ago

Ok I see. I have retracted my vote. Just as a point of interest will this do the trick? I'm no good with JavaScript so I am probably wrong.

Nkole Evans Over a year ago

I have retracted my vote too. Misunderstood the question :)

Xantium Over a year ago

No problem just a thought.

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Your .container Element:

Set the parent container (.container) size, and display type, and then set a overflow-y:scroll; property for the container. I also always like setting max-height too, but I don't think it's essential.

.container {
    position: relative;
    float: right;
    width: 74.4%;
    height: 150px;
    background-color: rgb(230,230,233);
    margin-top: 30px;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    text-align: left;
    border-radius: 4px;
    box-sizing: border-box; /****** NEW *****/
    max-height: 150px;   /****** NEW *****/
    overflow-y: scroll;  /****** NEW *****/
    overflow-x: hidden; /****** NEW *****/
 }

Be careful your .container div should not be an inline type display as manually setting the height will have no effect on inline elements (by default divs are block type so you're ok).

Your .text Element:

You state:

I want the .text and the .link-item to be fixed and only scroll on the list inside the container.

Because your text box is marked as position: fixed it will never scroll from its startpoint on the page. Remove your position: fixed or change this value to something else that suits your needs but allows this text box to scroll as required.

Going to the bottom of the list:

While not stated specifically in the quesiton but outlined by Soolie in their answer (previously downvoted) there is also an anchor code stating:

 <a href="www.something.com" class="link-item">GO TO THE LAST ITEM</a>

This can be done easily (at least, on the code snippet with Firefox it works a charm) with an anchor link thus:

<a href="#bottom" class="link-item">GO TO THE LAST ITEM</a>

And a corresponding link on the final <li>:

<li id='bottom'>

Complete code:

.container {
    position: relative;
    float: right;
    width: 74.4%;
    height: 150px;
    background-color: rgb(230,230,233);
    margin-top: 30px;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    text-align: left;
    border-radius: 4px;
    box-sizing: border-box; /****** NEW *****/
    max-height: 150px;   /****** NEW *****/
    overflow-y: scroll;  /****** NEW *****/
    overflow-x : hidden; /****** NEW *****/
 }
 
 .text {
    /** position: fixed **/
    font-size: 12px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    color: rgb(116,124,142);
    float: left;
    padding: 10px 0px 0px 40px;
  }
  

.box {
   position: absolute;
   padding: 20px 50px 0px 30px;
   color: rgb(116,124,142);
   font-size: 15px;
  }
  
  .link-item {
    position: absolute;
    top: 15px;
    width: 100%;
    font-weight: 400;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    color: rgb(87,135,253);
    text-align: right;
    padding-right: 40px;
    text-decoration: none;
    right: 0;   /*** Right align the absolute position ***/
  }

<div class="container">
  <div class="text">ACTION ITEMS</div>
    <div class="box">
      <ul>
        <li>something</li>
        <li>something</li>
        <li>something</li>
        <li>something</li>
        <li>something</li>
        <li>something</li>
        <li>something</li>
        <li>something</li>
        <li id='bottom'>something</li>
      </ul>
    </div>
    <a href="#bottom" class="link-item">GO TO THE LAST ITEM</a>
</div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 20, 2017 at 18:44

Mm-Art-In

23.1k13 gold badges81 silver badges144 bronze badges

5 Comments

Soolie Over a year ago

Not sure why this can be done just by using CSS alone, as GO TO THE LAST ITEM needs JavaScript. I am just concerned coz my answer has been downvoted and just thought of asking the community's help.\

Mm-Art-In Over a year ago

@Soolie while I appreciate your concern, I would find it strange to have a set of <ul> elements in a container that is smaller than them, and the want the default start to be at the bottom of the ul list. While I see your misunderstanding with the wording, I think that logic would dictate that if this is the intended desire, this structure of HTML (supplied in the question rather than sought in an answer) is the completely wrong way of even trying to achieve it.

Soolie Over a year ago

Thanks Martin. I have updated my answer now to clarify things. Hope I don't deserve those downvotes (I am not accusing you, don't feel so). Just wanted to know if my answer is okay now?

Soolie Over a year ago

This is good. But my approach is generic. To just scroll the div to the end. This is nice as well. You have my upvote! :D

Mm-Art-In Over a year ago

@Soolie You raised a good point that many people (myself included) hadn't noticed as it hadn't been specifically asked. I'm pleased to see you're back on the + votes now! A good turn around :-)

Nkole Evans · Accepted Answer · 2017-11-20 18:43:11Z

3

You need to give the DIV that contains your list a fixed size then apply an overflow declaration. See below:

 .box {
    position: absolute;
    padding: 20px 50px 0px 30px;
    color: rgb(116,124,142);
    font-size: 15px;
    overflow-y: scroll;height: 120px;
  }

answered Nov 20, 2017 at 18:43

Nkole Evans

3592 silver badges10 bronze badges

Comments

Behzod · Accepted Answer · 2017-11-20 19:33:50Z

2

give .box div overflow-y: auto; and preferred height size of div for scrolling.

.box {
  height: 200px;
  overflow-y: auto;
  background-color: #333;
  color: #fff;
}

<h1>Some Text</h1>
<div class="box">
  <ul>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
  </ul>
</div>

answered Nov 20, 2017 at 19:33

Behzod

213 bronze badges

Collectives™ on Stack Overflow

CSS - how to scroll a list in a div

4 Answers 4

14 Comments

Your .container Element:

Your .text Element:

Going to the bottom of the list:

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

14 Comments

Your .container Element:

Your .text Element:

Going to the bottom of the list:

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related