CODEWITHSUNDEEP
htmlcssscrollcss-position
Lizz Parody
Lizz Parody

Reputation: 1765

CSS - how to scroll a list in a div

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>

Upvotes: 5

Views: 11480

Answers (4)

Behzod
Behzod

Reputation: 21

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>

Upvotes: 2

Martin
Martin

Reputation: 22760

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>

Upvotes: 4

Soolie
Soolie

Reputation: 1820

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>

Upvotes: 5

Nkole Evans
Nkole Evans

Reputation: 359

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;
  }

Upvotes: 3

Related Questions