docs/assets/setOffset-dialog-example.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3025.884074919297 811.9855355240531" width="6051.768149838594" height="1623.9710710481063">
  <!-- svg-source:excalidraw -->
  
  <defs>
    <style class="style-fonts">
      @font-face {
        font-family: "Virgil";
        src: url("https://excalidraw.com/Virgil.woff2");
      }
      @font-face {
        font-family: "Cascadia";
        src: url("https://excalidraw.com/Cascadia.woff2");
      }
    </style>
  </defs>
  <g stroke-linecap="round" transform="translate(741.4464289712182 10) rotate(0 747.4363491508252 395.9927677620266)"><path d="M-0.36 -0.27 C540.63 3.58, 1081.14 4.52, 1494.14 0.22 M0.4 0.37 C405.42 1.15, 810.64 1.31, 1494.89 -0.35 M1494.43 -0.36 C1492.19 281.69, 1492.52 564.92, 1495.41 791.21 M1494.57 0.3 C1497.77 281.09, 1497.87 561.54, 1495.22 792.21 M1495.16 791.72 C988.49 797.59, 482.96 797.59, 0.37 791.23 M1495.07 792.05 C1056.83 795.98, 619.53 795.67, -0.14 792.16 M0.18 792.52 C-1.44 613.45, -1.55 435.03, -0.71 0.09 M0.32 792.38 C-2.85 592.33, -3.2 392.54, 0.11 -0.31" stroke="#000000" stroke-width="2" fill="none"></path></g><g stroke-linecap="round"><g transform="translate(731.5466097771673 74.68242146500381) rotate(0 752.4418390512773 -0.8405480145804347)"><path d="M0.64 -0.49 C251.42 -0.63, 1254.81 -0.99, 1505.37 -0.94 M-0.48 -1.79 C250.13 -1.81, 1253.58 -0.37, 1504.73 0.11" stroke="#000000" stroke-width="2" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(2191.9949898970717 28.657062240671166) rotate(0 9.661972316995957 11.594366780395148)"><path d="M0 0 C3.22 3.86, 16.1 19.32, 19.32 23.19 M0 0 C3.22 3.86, 16.1 19.32, 19.32 23.19" stroke="#000000" stroke-width="2" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(2191.9949898970717 53.77819026486054) rotate(0 10.62816954869561 -11.594366780395148)"><path d="M0 0 C3.54 -3.86, 17.71 -19.32, 21.26 -23.19 M0 0 C3.54 -3.86, 17.71 -19.32, 21.26 -23.19" stroke="#000000" stroke-width="2" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(731.5466097771673 699.0460529556316) rotate(0 752.4616184911438 0.2904251476358297)"><path d="M0.85 -0.88 C251.72 -0.87, 1254.42 -0.51, 1505.08 -0.23 M-0.16 1.27 C250.59 1.49, 1253.59 1.59, 1504.29 1.18" stroke="#000000" stroke-width="2" fill="none"></path></g></g><mask></mask><g stroke-linecap="round" transform="translate(1921.6257870154084 730.4778318847334) rotate(0 58.15545602609734 22.353717227799848)"><path d="M11.18 0 M11.18 0 C45.28 0, 79.38 0, 105.13 0 M11.18 0 C31.76 0, 52.34 0, 105.13 0 M105.13 0 C112.59 0, 116.31 3.73, 116.31 11.18 M105.13 0 C112.59 0, 116.31 3.73, 116.31 11.18 M116.31 11.18 C116.31 19.24, 116.31 27.31, 116.31 33.53 M116.31 11.18 C116.31 19.4, 116.31 27.61, 116.31 33.53 M116.31 33.53 C116.31 40.98, 112.59 44.71, 105.13 44.71 M116.31 33.53 C116.31 40.98, 112.59 44.71, 105.13 44.71 M105.13 44.71 C85.19 44.71, 65.24 44.71, 11.18 44.71 M105.13 44.71 C80.43 44.71, 55.73 44.71, 11.18 44.71 M11.18 44.71 C3.73 44.71, 0 40.98, 0 33.53 M11.18 44.71 C3.73 44.71, 0 40.98, 0 33.53 M0 33.53 C0 26.9, 0 20.27, 0 11.18 M0 33.53 C0 28.96, 0 24.39, 0 11.18 M0 11.18 C0 3.73, 3.73 0, 11.18 0 M0 11.18 C0 3.73, 3.73 0, 11.18 0" stroke="#000000" stroke-width="2" fill="none"></path></g><g stroke-linecap="round" transform="translate(2086.3995790893505 729.259771773198) rotate(0 63.00174402827213 22.616010676815648)"><path d="M11.31 0 L114.7 0 L119.64 0.71 L123.18 2.83 L125.3 6.36 L126 11.31 L126 33.92 L125.3 38.87 L123.18 42.41 L119.64 44.53 L114.7 45.23 L11.31 45.23 L6.36 44.53 L2.83 42.41 L0.71 38.87 L0 33.92 L0 11.31 L0.71 6.36 L2.83 2.83 L6.36 0.71 L11.31 0" stroke="none" stroke-width="0" fill="#409eff87"></path><path d="M11.31 0 M11.31 0 C33.25 0, 55.2 0, 114.7 0 M11.31 0 C38.49 0, 65.67 0, 114.7 0 M114.7 0 C122.23 0, 126 3.77, 126 11.31 M114.7 0 C122.23 0, 126 3.77, 126 11.31 M126 11.31 C126 18.02, 126 24.73, 126 33.92 M126 11.31 C126 15.93, 126 20.56, 126 33.92 M126 33.92 C126 41.46, 122.23 45.23, 114.7 45.23 M126 33.92 C126 41.46, 122.23 45.23, 114.7 45.23 M114.7 45.23 C86.06 45.23, 57.42 45.23, 11.31 45.23 M114.7 45.23 C73.6 45.23, 32.51 45.23, 11.31 45.23 M11.31 45.23 C3.77 45.23, 0 41.46, 0 33.92 M11.31 45.23 C3.77 45.23, 0 41.46, 0 33.92 M0 33.92 C0 29.19, 0 24.46, 0 11.31 M0 33.92 C0 27.29, 0 20.65, 0 11.31 M0 11.31 C0 3.77, 3.77 0, 11.31 0 M0 11.31 C0 3.77, 3.77 0, 11.31 0" stroke="#000000" stroke-width="2" fill="none"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(10 403.1852117098819) rotate(0 305.5 52)"><text x="0" y="73" font-family="Virgil, Segoe UI Emoji" font-size="81.95189649169149px" fill="#c92a2a" text-anchor="start" style="white-space: pre;" direction="ltr">full scroll area</text></g><g stroke-opacity="0.5" fill-opacity="0.5" stroke-linecap="round" transform="translate(760.1060422343717 83.18655110787068) rotate(0 729.6050372108684 302.16722419402953)"><path d="M0 0 L1459.21 0 L1459.21 604.33 L0 604.33" stroke="none" stroke-width="0" fill="#409eff55"></path><path d="M0 0 C317.25 0, 634.5 0, 1459.21 0 M1459.21 0 C1459.21 205.62, 1459.21 411.24, 1459.21 604.33 M1459.21 604.33 C929.18 604.33, 399.16 604.33, 0 604.33 M0 604.33 C0 464.41, 0 324.48, 0 0" stroke="#c92a2a" stroke-width="4.5" fill="none" stroke-dasharray="8 12"></path></g><g stroke-linecap="round"><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(758.1011285761261 451.0689987060558) rotate(0 -59.71983977517051 0.5224967837300198)"><path d="M0 0 C-42.02 0.37, -84.05 0.74, -119.44 1.04 M0 0 C-40.92 0.36, -81.85 0.72, -119.44 1.04" stroke="#000000" stroke-width="4" fill="none"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(758.1011285761261 451.0689987060558) rotate(0 -59.71983977517051 0.5224967837300198)"><path d="M-91.34 -9.46 C-101.23 -5.77, -111.11 -2.07, -119.44 1.04 M-91.34 -9.46 C-100.97 -5.86, -110.6 -2.26, -119.44 1.04" stroke="#000000" stroke-width="4" fill="none"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(758.1011285761261 451.0689987060558) rotate(0 -59.71983977517051 0.5224967837300198)"><path d="M-91.16 11.06 C-101.11 7.54, -111.06 4.01, -119.44 1.04 M-91.16 11.06 C-100.85 7.63, -110.54 4.2, -119.44 1.04" stroke="#000000" stroke-width="4" fill="none"></path></g></g><mask></mask><g stroke-opacity="0.5" fill-opacity="0.5" stroke-linecap="round" transform="translate(783.2617031461127 103.30518301990679) rotate(0 706.8291341658376 53.90402609864441)"><path d="M0 0 L1413.66 0 L1413.66 107.81 L0 107.81" stroke="none" stroke-width="0" fill="#409eff"></path><path d="M0 0 C315.88 0, 631.76 0, 1413.66 0 M1413.66 0 C1413.66 34.02, 1413.66 68.04, 1413.66 107.81 M1413.66 107.81 C861.92 107.81, 310.17 107.81, 0 107.81 M0 107.81 C0 85.17, 0 62.53, 0 0" stroke="#c92a2a" stroke-width="4.5" fill="none" stroke-dasharray="8 12"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(2347.884074919297 78.63738981006503) rotate(0 334 59)"><text x="0" y="87" font-family="Virgil, Segoe UI Emoji" font-size="81.95189649169149px" fill="#c92a2a" text-anchor="start" style="white-space: pre;" direction="ltr">position: sticky；</text></g><g stroke-linecap="round"><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(2197.919971477788 155.56336035388728) rotate(0 63.67635698007075 -5.301141329035346)"><path d="M0 0 C41.39 -3.45, 82.77 -6.89, 127.35 -10.6 M0 0 C37 -3.08, 74 -6.16, 127.35 -10.6" stroke="#000000" stroke-width="4" fill="none"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(2197.919971477788 155.56336035388728) rotate(0 63.67635698007075 -5.301141329035346)"><path d="M100.11 1.96 C108.96 -2.12, 117.82 -6.2, 127.35 -10.6 M100.11 1.96 C108.03 -1.69, 115.94 -5.34, 127.35 -10.6" stroke="#000000" stroke-width="4" fill="none"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(2197.919971477788 155.56336035388728) rotate(0 63.67635698007075 -5.301141329035346)"><path d="M98.41 -18.49 C107.81 -15.93, 117.22 -13.36, 127.35 -10.6 M98.41 -18.49 C106.82 -16.2, 115.23 -13.91, 127.35 -10.6" stroke="#000000" stroke-width="4" fill="none"></path></g></g><mask></mask><g stroke-opacity="0.5" fill-opacity="0.5" stroke-linecap="round" transform="translate(783.2612165889486 228.95569189514782) rotate(0 706.8291341658376 217.13515613463255)"><path d="M0 0 L1413.66 0 L1413.66 434.27 L0 434.27" stroke="none" stroke-width="0" fill="#409eff"></path><path d="M0 0 C562.65 0, 1125.3 0, 1413.66 0 M1413.66 0 C1413.66 165.13, 1413.66 330.27, 1413.66 434.27 M1413.66 434.27 C936.6 434.27, 459.54 434.27, 0 434.27 M0 434.27 C0 324.85, 0 215.43, 0 0" stroke="#c92a2a" stroke-width="4.5" fill="none" stroke-dasharray="8 12"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(813.6307362038249 123.3651228315037) rotate(0 89 33.5)"><text x="0" y="47" font-family="Virgil, Segoe UI Emoji" font-size="53.54145959954241px" fill="#343a40" text-anchor="start" style="white-space: pre;" direction="ltr">Header</text></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(21.631298082522335 120.39396892598921) rotate(0 293 52)"><text x="0" y="73" font-family="Virgil, Segoe UI Emoji" font-size="81.95189649169149px" fill="#c92a2a" text-anchor="start" style="white-space: pre;" direction="ltr">a simple dialog</text></g><g stroke-linecap="round"><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(735.8911186136346 149.47520552383628) rotate(0 -52.93402621316487 12.176279093420234)"><path d="M0 0 C-26.26 6.04, -52.51 12.08, -105.87 24.35 M0 0 C-42.07 9.68, -84.14 19.36, -105.87 24.35" stroke="#000000" stroke-width="4" fill="none"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(735.8911186136346 149.47520552383628) rotate(0 -52.93402621316487 12.176279093420234)"><path d="M-80.69 8.03 C-86.94 12.08, -93.18 16.13, -105.87 24.35 M-80.69 8.03 C-90.7 14.52, -100.7 21, -105.87 24.35" stroke="#000000" stroke-width="4" fill="none"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(735.8911186136346 149.47520552383628) rotate(0 -52.93402621316487 12.176279093420234)"><path d="M-76.09 28.03 C-83.48 27.12, -90.86 26.21, -105.87 24.35 M-76.09 28.03 C-87.93 26.57, -99.76 25.11, -105.87 24.35" stroke="#000000" stroke-width="4" fill="none"></path></g></g><mask></mask><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(815.9074993611487 256.01807224444696) rotate(0 480 36.5)"><text x="0" y="51" font-family="Virgil, Segoe UI Emoji" font-size="57.68627941113194px" fill="#343a40" text-anchor="start" style="white-space: pre;" direction="ltr">the actual scrolling area you see</text></g><g stroke-opacity="0.5" fill-opacity="0.5" stroke-linecap="round" transform="translate(2166.0695644226125 234.51092115987052) rotate(0 11.38843807968044 88.82800459606642)"><path d="M6.36 1.17 L18.99 0.62 L23.05 5.46 L23.73 170.53 L19.98 175.29 L16.56 176.24 L1.46 176.19 L-0.14 173.52 L-1.11 7.12 L2.62 -0.54 L5.18 1.08" stroke="none" stroke-width="0" fill="#c92a2a"></path><path d="M5.69 0 M5.69 0 C7.62 -1.01, 11.2 0.27, 17.08 0 M5.69 0 C8.72 0.41, 11.16 -0.38, 17.08 0 M17.08 0 C22.22 1.25, 20.82 3.18, 22.78 5.69 M17.08 0 C19.48 0.84, 21 1.58, 22.78 5.69 M22.78 5.69 C25.53 67.41, 25.07 129.4, 22.78 171.96 M22.78 5.69 C22.84 45.08, 22.17 85.21, 22.78 171.96 M22.78 171.96 C22.16 174.64, 20.51 179.55, 17.08 177.66 M22.78 171.96 C23.14 175.25, 22.73 178.1, 17.08 177.66 M17.08 177.66 C12.86 178.53, 10.68 177.5, 5.69 177.66 M17.08 177.66 C12.88 177.99, 8.22 177.89, 5.69 177.66 M5.69 177.66 C2.7 177.81, 1.1 175.5, 0 171.96 M5.69 177.66 C3.7 178.9, 0.84 176.92, 0 171.96 M0 171.96 C-0.65 130.13, -2.6 89.68, 0 5.69 M0 171.96 C-0.95 112.59, -0.38 53.74, 0 5.69 M0 5.69 C-1.77 3.34, 2.17 0.38, 5.69 0 M0 5.69 C-0.86 3.49, 0.87 -0.54, 5.69 0" stroke="#c92a2a" stroke-width="1" fill="none"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(2344.147386016716 303.36484475555613) rotate(0 328.5 138.5)"><text x="0" y="48.25" font-family="Virgil, Segoe UI Emoji" font-size="54.59315618851772px" fill="#c92a2a" text-anchor="start" style="white-space: pre;" direction="ltr">So the initial position of</text><text x="0" y="117.5" font-family="Virgil, Segoe UI Emoji" font-size="54.59315618851772px" fill="#c92a2a" text-anchor="start" style="white-space: pre;" direction="ltr">the scrollbar should be </text><text x="0" y="186.75" font-family="Virgil, Segoe UI Emoji" font-size="54.59315618851772px" fill="#c92a2a" text-anchor="start" style="white-space: pre;" direction="ltr">shifted upwards by a </text><text x="0" y="256" font-family="Virgil, Segoe UI Emoji" font-size="54.59315618851772px" fill="#c92a2a" text-anchor="start" style="white-space: pre;" direction="ltr">certain distance</text></g><g stroke-linecap="round"><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(2191.7808505574976 327.23866722453306) rotate(0 67.154984889135 6.766935316339911)"><path d="M0 0 C49.71 5.01, 99.42 10.02, 134.31 13.53 M0 0 C44.44 4.48, 88.89 8.96, 134.31 13.53" stroke="#000000" stroke-width="4" fill="none"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(2191.7808505574976 327.23866722453306) rotate(0 67.154984889135 6.766935316339911)"><path d="M105.23 20.92 C115.99 18.18, 126.76 15.45, 134.31 13.53 M105.23 20.92 C114.85 18.47, 124.48 16.03, 134.31 13.53" stroke="#000000" stroke-width="4" fill="none"></path></g><g stroke-opacity="0.5" fill-opacity="0.5" transform="translate(2191.7808505574976 327.23866722453306) rotate(0 67.154984889135 6.766935316339911)"><path d="M107.29 0.5 C117.29 5.32, 127.29 10.15, 134.31 13.53 M107.29 0.5 C116.23 4.81, 125.17 9.13, 134.31 13.53" stroke="#000000" stroke-width="4" fill="none"></path></g></g><mask></mask></svg>