69 lines
1.9 KiB
HTML
69 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.container {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-right: 30px;
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 5px solid pink;
|
|
position: relative;
|
|
}
|
|
|
|
.container > div {
|
|
overflow: auto;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.container > div > div {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
|
|
background: -moz-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.topRight {
|
|
direction: rtl; /* place scrollbars on the LHS */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Scrollbars should work in all the flexboxes. Each row should be aligned
|
|
to the same corner.</p>
|
|
|
|
<div class="container topRight"><div><div></div></div></div>
|
|
<div class="container topRight"><div><div></div></div></div>
|
|
<div class="container topRight"><div><div></div></div></div>
|
|
<div class="container topRight"><div><div></div></div></div>
|
|
<br>
|
|
<div class="container"><div><div></div></div></div>
|
|
<div class="container"><div><div></div></div></div>
|
|
<div class="container"><div><div></div></div></div>
|
|
<div class="container"><div><div></div></div></div>
|
|
<br>
|
|
<div class="container"><div><div></div></div></div>
|
|
<div class="container"><div><div></div></div></div>
|
|
<div class="container"><div><div></div></div></div>
|
|
<div class="container"><div><div></div></div></div>
|
|
|
|
<script>
|
|
|
|
Array.prototype.forEach.call(document.querySelectorAll('.bottomLeft'), function(element) {
|
|
element.firstChild.scrollTop = 1000;
|
|
});
|
|
|
|
Array.prototype.forEach.call(document.querySelectorAll('.topRight'), function(element) {
|
|
element.firstChild.scrollLeft = 1000;
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|