CSS переполнение прокрутки и видны одновременно

Question

У меня есть прокручиваемый div с дочерним div. Есть ли способ показать целого ребенка (также за пределами прокручиваемого div)? Теперь overflow-x: scroll похоже на overflow-x: hidden с полосой прокрутки. Я хотел бы overflow-x: visible с полосой прокрутки. Вот скрипка .

.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>

Answer 1

Вы можете использовать некоторые js здесь, чтобы клонировать дочерний элемент, а затем использовать событие scroll на container для вычисления горизонтальной прокрутки и использовать то же значение для смещения позиции клонированного элемента.

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>