html - CSS 溢出滚动同时可见

Question

我有带子 div 的可滚动 div。有没有办法显示整个 child (也在可滚动的 div 之外)？现在，overflow-x: scroll 就像带有滚动条的overflow-x: hidden。我想要带有滚动条的overflow-x: visible。这是 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>

Answer 1

你可以在这里使用一些js来克隆子元素，然后使用container上的scroll事件来计算水平滚动并使用相同的值来偏移位置克隆元素的。

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>