如何解决“剪切”元素的一部分作为滚动行为
我目前正在实现一个控制器，该控制器可以更改另一个HTML元素的外观，以便在事件触发时，应将部分元素切掉（消失）。
效果应该与常规滚动条非常相似，在窗口中仅显示元素的特定部分。
我想知道实现这种事情的正确方法是什么。
运行代码片段进行图像演示：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="481px" viewBox="-0.5 -0.5 481 281" content="<mxfile host="app.diagrams.net" modified="2020-08-24T20:16:04.706Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/84.0.4147.135 Safari/537.36" etag="F-YfARe24URzr642LCEu" version="13.6.5" type="browser"><diagram id="9K3jEFCONYih4cx8FHUZ" name="Page-1">3ZdNc5swEIZ/Dcd0QHz6mBI3nem409aHnBVpMUoFYoQc7P76iiA+FJzGPmRce4aDeHe10j67jITjp8XuXuIqXwkK3EEu3Tn+nYOQFyDktI9L950SB2EnbCSjxmkU1uwPGNE16pZRqC1HJQRXrLJFIsoSiLI0LKVobLdMcHvVCm9gJqwJ5nP1gVGVd2qC4lH/CmyT9yt70aKzFLh3NpnUOaaimUj+0vFTKYTqRsUuBd7C67l08768YR02JqFUx0xIxc8VQw/0pvx+9w0//UrEU3RjojxjvjUJm82qfU9Aim1JoQ3iOv7nJmcK1hUmrbXRNddargqu3zw9zBjnqeBCvsz1KYYkI1qvlRS/YWKJSAKPmbbM0+j3BFLBbiKZtO5BFKDkXrv01oVBbHpsaJ5mrBhyjZZPqxUZEZsu2QyxR5B6YFiewBXNuK4wK7Wy5FC0mb6mrLujaodEcI4VnEw6SwiQg6QfkzAI3asl7V9DBwexzXXAdT6uwXV28H9IOpyRvi2FykH+A/ZJLf0BH74XHontw6hFF0jNj89NLb4AarNP9Oy9llwgtfP32uL9kxlKette0ttjg+O6ZuRILkCta/ucyiTr8EDSvSZBn1Xs2b7sHyJhVvghWFvrAboXWNBRsvgU2kFqsZUEzLzp9fx1qPDdUArLDahZqJfiDKkfqpd+Hf8zOvfxb81f/gU=</diagram></mxfile>" onclick="(function(svg){var src=window.event.target||window.event.srcElement;while (src!=null&&src.nodeName.toLowerCase()!='a'){src=src.parentNode;}if(src==null){if(svg.wnd!=null&&!svg.wnd.closed){svg.wnd.focus();}else{var r=function(evt){if(evt.data=='ready'&&evt.source==svg.wnd){svg.wnd.postMessage(decodeURIComponent(svg.getAttribute('content')),'*');window.removeEventListener('message',r);}};window.addEventListener('message',r);svg.wnd=window.open('https://viewer.diagrams.net/?client=1&edit=_blank');}}})(this);" style="cursor:pointer;max-width:100%;max-height:281px;"><defs/><g><rect x="0" y="60" width="200" height="160" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 0 60 L 200 60 L 100 140 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="all"/><path d="M 0 220 L 200 220 L 100 140 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 140px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Main Element</div></div></div></foreignObject><text x="100" y="144" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Main Element</text></switch></g><rect x="280" y="10" width="200" height="160" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 280 10 L 480 10 L 380 90 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="all"/><path d="M 280 170 L 480 170 L 380 90 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 90px; margin-left: 281px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Main Element</div></div></div></foreignObject><text x="380" y="94" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Main Element</text></switch></g><rect x="0" y="0" width="200" height="60" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 30px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Another Element</div></div></div></foreignObject><text x="100" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Another Element</text></switch></g><rect x="0" y="220" width="200" height="60" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 250px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Another Element</div></div></div></foreignObject><text x="100" y="254" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Another Element</text></switch></g><rect x="280" y="0" width="200" height="60" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 30px; margin-left: 281px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Another Element</div></div></div></foreignObject><text x="380" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Another Element</text></switch></g><rect x="280" y="220" width="200" height="60" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 250px; margin-left: 281px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Another Element</div></div></div></foreignObject><text x="380" y="254" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Another Element</text></switch></g><path d="M 224 139.5 L 257.63 139.5" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 262.88 139.5 L 255.88 143 L 257.63 139.5 L 255.88 136 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。