Home/ Questions/Q 7079057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T06:37:27+00:00

I am trying to make a list in HTML with only a vertical scrollbar.

  • 0

I am trying to make a list in HTML with only a vertical scrollbar. I understand how to do this but the part where I get stuck is positioning a div inside the overflow’d element over the edges of the overflow’d element.

See code below:

#wrapper {margin: 50px; width: 500px; height: 500px;}
#scrollable {width: 200px; height: 500px; overflow-y: visible; overflow-x: hidden;}
.item {clear: left; width: 200px; height: 40px;}

<body>
  <div id='wrapper'>
    <div id='scrollable'>
      <div class='item'></div>
      <div class='item'></div>
    </div>
  </div>
</body>

I want the .item elements to go 5 or 10 pixels over the left edge of #scrollable.

Can anyone show me how to do this?

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So, as others have said, you cannot show elements out of the bounds of an elements that has an overflow that is not “visible.”

    However, assuming you’re simply trying to achieve an effect, you can do so easily. One way would be, if your #scrollable element must be 200px, then make each .item 190px in width, and offset by 10px to the left. Otherwise, if you’re .items must be 200px in width, then make your #scrollable element 210px to compensate. Then, on selection, offset left by 0.

    I’ve made a JSFiddle with it. Take a look (the JS in it is unnecessary, but just mimics a selection)
    http://jsfiddle.net/rgthree/tpfLZ/

    • 0