vite-corex-tailwind/scrollbar.html at master · netoum/vite-corex-tailwind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/images/corex.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Corex Scrollbar</title>
  <script type="module" src="/src/main.ts"></script>
</head>

<body>
  <header>
    <a href="/">
      <svg class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 428 136" version="1.1">
        <path
          d="M70.573 1.67C33.94 1.67 4.243 31.367 4.243 68c0 36.634 29.697 66.33 66.33 66.33s66.33-29.696 66.33-66.33c0-36.633-29.697-66.33-66.33-66.33m.05 102.736c-20.117 0-36.427-16.308-36.427-36.427 0-20.118 16.31-36.427 36.427-36.427 17.055 0 31.37 11.723 35.333 27.55H89.845c-3.365-7.255-10.713-12.301-19.222-12.301-11.678 0-21.179 9.501-21.179 21.18s9.501 21.178 21.18 21.178c8.539 0 15.907-5.08 19.256-12.377h16.095c-3.939 15.864-18.269 27.624-35.352 27.624"
          fill="currentColor" />
        <path
          d="M181.505 108.48q-10.5 0-19.24-4.88-8.75-4.87-13.89-13.62-5.14-8.74-5.14-19.66t5.14-19.61q5.14-8.69 13.89-13.57 8.74-4.87 19.24-4.87 10.49 0 19.24 4.87 8.74 4.88 13.78 13.57 5.03 8.69 5.03 19.61t-5.09 19.66q-5.09 8.75-13.78 13.62-8.69 4.88-19.18 4.88m0-16.54q8.9 0 14.25-5.93 5.36-5.94 5.36-15.69 0-9.86-5.36-15.74-5.35-5.88-14.25-5.88-9.01 0-14.37 5.83-5.35 5.83-5.35 15.79 0 9.86 5.35 15.74 5.36 5.88 14.37 5.88"
          fill="currentColor" />
        <path
          d="m267.575 107.74-15.48-28.09h-4.34v28.09h-18.13V33.33h30.42q8.8 0 15 3.07 6.2 3.07 9.28 8.43 3.07 5.35 3.07 11.92 0 7.42-4.19 13.25-4.18 5.83-12.35 8.27l17.18 29.47Zm-19.82-40.92h11.23q4.98 0 7.48-2.44 2.49-2.43 2.49-6.89 0-4.24-2.49-6.67-2.5-2.44-7.48-2.44h-11.23Z"
          fill="currentColor" />
        <path d="M316.865 47.85V62.9h24.27v13.99h-24.27v16.33h27.45v14.52h-45.58V33.33h45.58v14.52Z"
          fill="currentColor" />
        <path
          d="m401.665 107.74-15.16-22.79-13.36 22.79h-20.56l23.85-37.84-24.38-36.57h21.09l14.95 22.47 13.14-22.47h20.57l-23.64 37.52 24.59 36.89Z"
          fill="currentColor" />
      </svg>
    </a>


    </div>
  </header>
  <main>
    <h1>Scrollbar</h1>
    <div class="preview">
      <div class="scrollbar" style="width: 150px; height: 150px; overflow-y: auto; justify-content: start;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
        suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
        Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
        rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
      </div>
      <div class="scrollbar" style="width: 150px; overflow-x: auto; justify-content: start;">
        <div style="min-width: 300px; display: inline-block;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus.
        </div>
      </div>
      <div class="scrollbar" style="width: 150px; height: 150px; overflow: auto; justify-content: start;">
        <div style="min-width: 300px; min-height: 300px; display: block;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nisi risus, aliquam vitae
          suscipit non, mattis vel enim. Aliquam in leo luctus, accumsan neque varius, fringilla lorem.
          Duis eros ipsum, efficitur non faucibus vel, eleifend nec urna. Nunc varius, nisl sed blandit
          rhoncus, urna neque posuere nisi, eu lacinia odio felis sed nibh.
        </div>
      </div>
    </div>
  </main>
</body>

</html>