CSS overflow scroll and visible at same time

Question

I have scrollable div with child div. Is there any way to show whole child (also outside of scrollable div)? Now, overflow-x: scroll is like overflow-x: hidden with scrollbar. I would like overflow-x: visible with scrollbar. Here is fiddle.

.container {
  margin: 0 auto;
  overflow-x: scroll;
  width: 300px;
}

.child {
  background-image: linear-gradient(to left, blue, green);
  height: 100px;
  width: 600px;
}

.containerExample {
  background-image: linear-gradient(to left, blue, green);
  margin: 0 auto;
  overflow-x: visible;
  width: 600px;
}

.childExample {
  border: 1px solid red;
  height: 100px;
  margin: 0 auto;
  width: 300px;
}

Now:

<div class="container">
<div class="child">

</div>
</div>

What I want (red border should be scrollable div):

<div class="containerExample">
<div class="childExample">

</div>
</div>

Lucrative

You want this red div to be movable? – Nostoc

Answer 1

You could use some js here to clone the child element and then use scroll event on the container to calculate the horizontal scroll and use the same value to offset the position of the cloned element.

const container = $(".container")
const child = container.find('.child');
const clone = child.clone();
const border = 4;

clone.addClass('clone');
child.addClass('transparent');
container.css('border-width', border);
container.before(clone)

$(".container").on('scroll', function() {
  const offset = $(this).scrollLeft() - border;
  clone.css({
    left: -offset
  })
})

body {
  overflow-x: hidden;
}

.container {
  margin: 0 auto;
  overflow-x: scroll;
  width: 300px;
  border: solid red;
  z-index: 10;
}

.wrapper {
  margin: 0 auto;
  width: 300px;
  position: relative;
}

.child {
  background-image: linear-gradient(to left, blue, green);
  height: 100px;
  width: 600px;
  position: relative;
}

.clone {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
}

.transparent {
  background: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="child"></div>
  </div>
</div>

Courtenay

Answer 2

I created this because it's a problem I keep re-writing myself so this is both for you and me as a reminder of how it works :)

It's in bootstrap but you can copy the styles and just use it for your own CSS

A horizontally scrollable "carousel" style row with no scrollbars

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid overflow-scroll">
  <div class="container ">
    <div class="row flex-nowrap overflow-visible">
      <div class="col-4">
        <div class="bg-primary">asdfafd
        </div>
      </div>
      <div class="col-4 ">
        <div class="bg-light">asd
        </div>
      </div>
      <div class="col-4">
        <div class="bg-light">asdfa
        </div>
      </div>
      <div class="col-4">
        <div class="bg-light">asdfaf
        </div>
      </div>
    </div>
  </div>
</div>

Alcantara

Answer 3

This technique won't work for all use cases, but it does for your example. Since scroll content is visible in the padding area, I add a padding of the same size as the space between the viewport and the element and then push it the same amount back to the left.

.width {
  width: 500px;
  margin-inline: auto;
  border: 1px solid red;
}

.scroll {
  overflow: auto;
  padding-inline: calc((100vw - 100%) / 2);
  width: 100%;
  margin-left: calc((100vw - 100%) / -2);
}

.content {
  width: 200vw;
  height: 100px;
  background-image: linear-gradient(90deg, green, blue);
}

<div class="width">
  I'm normal
  <div class="scroll">
    <div class="content"></div>
  </div>
  And I'm here too
</div>

Hope this helps!

Spathe