Question

我的子div有可滚动的div。有没有办法显示整个孩子（也在可滚动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来克隆子元素，然后在scroll上使用container事件来计算水平滚动并使用相同的值来抵消克隆元素的位置。 / p>

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>

CSS溢出滚动并同时可见

1 个答案: