|
|
@@ -0,0 +1,50 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<link rel="match" href="reference/paintablewithlines-corner-clip-in-scroll-container-ref.html" />
|
|
|
+<style>
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ * {
|
|
|
+ scrollbar-width: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ #container {
|
|
|
+ height: 500px;
|
|
|
+ overflow: scroll;
|
|
|
+ border: 1px solid black;
|
|
|
+ }
|
|
|
+
|
|
|
+ #padding {
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #rounded-corners-mask {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow: scroll;
|
|
|
+ font-size: 40px;
|
|
|
+ background-color: orangered;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<div id="container">
|
|
|
+ <div id="padding"></div>
|
|
|
+ <div id="rounded-corners-mask">
|
|
|
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices neque
|
|
|
+ eu nisi facilisis viverra. Integer lacinia, lacus vel condimentum suscipit,
|
|
|
+ lacus felis porta nulla, eget lacinia sem neque ut neque. In sagittis, eros
|
|
|
+ vel interdum porta, quam ex rhoncus lectus, vitae suscipit risus orci sit
|
|
|
+ amet velit. Praesent imperdiet condimentum rutrum. Cras vitae nisl sapien.
|
|
|
+ Curabitur ligula diam, tincidunt congue tincidunt nec, sodales nec orci.
|
|
|
+ Vestibulum tincidunt non elit in vehicula. Etiam malesuada neque eu porta
|
|
|
+ rhoncus. Curabitur vel nunc finibus ligula posuere venenatis.
|
|
|
+ </div>
|
|
|
+ <div id="padding"></div>
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+ const scrollContainer = document.getElementById("container");
|
|
|
+ scrollContainer.scrollTop = 300;
|
|
|
+</script>
|
Aliaksandr Kalenik