我有带子 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>
最佳答案
你可以在这里使用一些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>
关于html - CSS 溢出滚动同时可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58225111/