1

I have researched this but could only find very old answers and no real solution. This is the problem:

div {position: absolute;width:300px;height:250px;background:black;overflow-y:scroll;overflow-x:visible;}
span {display:block;position:relative;background:red;width:300px;height:530px;}
button {position: absolute;width:100px;height:50px;background:blue;left:250px;}
<div>
 <span>
  <button>
  </button>
 </span>
</div>

the blue rectangle should stick out of the main div without the need of a scrollbar, whereas the red rectangle should be scrollable in the y axis. But it seems like I cant have a scrollbar only in one axis. Is there a workaround for this? CSS only please.

gobler
  • 95
  • 1
  • 6

3 Answers3

1

Okay, I found a way around with only CSS, and without changing the markup.

You can set the div's width bigger to include the blue button.

Then you can make the scrollbar closer to the div, as if the div is smaller.

You can't use margin and padding on scrollbar. So you have to make it transparent and cast a shadow on it to make it look like it's next to the div.

You can use this component with other components by using position: absolute and z-index css-tricks

But honestly, it's a lot of work. It could be easier for you to go on another way.

div {
  position: absolute;
  width:400px;
  height:250px;
  overflow-y:scroll;
  overflow-x:visible;
}
div::-webkit-scrollbar {
    width: 10px;
}

div::-webkit-scrollbar-track {
    box-shadow: -90px 0px 0px 0px lightgrey;
    border: solid 3px transparent;
}

div::-webkit-scrollbar-thumb {
    box-shadow: -90px 0px 0px 0px grey;
    border: solid 3px transparent;
}
span {
  display:block;
  position:relative;
  background:red;
  width:300px;
  height:530px;
}
button {
  position: absolute;
  width:100px;
  height:50px;
  background:blue;
  left:250px;
}
<div>
 <span>
  <button>
  </button>
 </span>
</div>
Furkan Atılgan
  • 176
  • 6
0

You need at least one more element as a holder. With an element that has scrolling enabled, no element can stick out to the side.

also, you should use a div instead of making a span a block element, since span tags should be used to mark up individual words as inline-block element inside div tags.

div {
  position: absolute;
  width:300px;
  height:250px;
  background:black;
}

div.scroll {
  position: relative;
  width:100%;
  height:100%;
  background:black;
  overflow-y:scroll;
  overflow-x:hidden;
}

div.content {
  position:relative;
  background:red;
  width:100%;
  height:530px;
}

button {
  position: absolute;
  width:100px;
  height:50px;
  background:blue;
  top: 0;
  right:-50px;
}
<div>
  <div class="scroll">
    <div class="content">
    </div>
  </div>
  <button>
  </button>
</div>
com.on.ist
  • 177
  • 1
  • 10
  • thanks but the problem is that the main div is position absolute and that the blue rectangle has to be attached to the span. – gobler May 29 '22 at 17:45
  • the main div could have position absolute. i changed it in my example. but i think the blue rectangle can not be inside the span (or div.content), while this is scrollable AND stick out. changing the markup is not possible? – com.on.ist May 29 '22 at 17:59
  • not quite. The button has to be attached to the span so it scrolls along with it. This is another example: https://jsfiddle.net/zg198aqu/ it would be nice if only that yellow box could stick out. – gobler May 29 '22 at 19:08
  • okay, i get it wrong in the first place. so the box should scroll along and stick out on the left side of the element, but not be visible at the top and bottom outside the element? but you can not mix "overflow-y: auto;" and "overflow-x: visible;" in one element. – com.on.ist May 29 '22 at 20:02
  • so it seems but I need to achieve the effect. There must be a way around somehow. – gobler May 29 '22 at 20:49
0

It works if you put an extra div outside and move the button out of the scrollable area:

#container{position: relative;}
#scrollable {position: absolute;width: 300px;height: 250px;background: black;overflow-y: scroll;overflow-x: hidden;}
#red {display: block;position: relative;background: red;width: 300px;height: 530px;}
button {position: absolute;width: 100px;height: 50px;background: blue;left: 250px;}
<div id="container">
    <div id="scrollable">
        <span id="red"></span>
    </div>
    <button></button>
</div>
Furkan Atılgan
  • 176
  • 6