javascript - “剪切”元素的一部分（作为滚动的行为）

Question

我目前正在实现一个控制器来更改另一个 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="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2020-08-24T20:16:04.706Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36&quot; etag=&quot;F-YfARe24URzr642LCEu&quot; version=&quot;13.6.5&quot; type=&quot;browser&quot;&gt;&lt;diagram id=&quot;9K3jEFCONYih4cx8FHUZ&quot; name=&quot;Page-1&quot;&gt;3ZdNc5swEIZ/Dcd0QHz6mBI3nem409aHnBVpMUoFYoQc7P76iiA+FJzGPmRce4aDeHe10j67jITjp8XuXuIqXwkK3EEu3Tn+nYOQFyDktI9L950SB2EnbCSjxmkU1uwPGNE16pZRqC1HJQRXrLJFIsoSiLI0LKVobLdMcHvVCm9gJqwJ5nP1gVGVd2qC4lH/CmyT9yt70aKzFLh3NpnUOaaimUj+0vFTKYTqRsUuBd7C67l08768YR02JqFUx0xIxc8VQw/0pvx+9w0//UrEU3RjojxjvjUJm82qfU9Aim1JoQ3iOv7nJmcK1hUmrbXRNddargqu3zw9zBjnqeBCvsz1KYYkI1qvlRS/YWKJSAKPmbbM0+j3BFLBbiKZtO5BFKDkXrv01oVBbHpsaJ5mrBhyjZZPqxUZEZsu2QyxR5B6YFiewBXNuK4wK7Wy5FC0mb6mrLujaodEcI4VnEw6SwiQg6QfkzAI3asl7V9DBwexzXXAdT6uwXV28H9IOpyRvi2FykH+A/ZJLf0BH74XHontw6hFF0jNj89NLb4AarNP9Oy9llwgtfP32uL9kxlKette0ttjg+O6ZuRILkCta/ucyiTr8EDSvSZBn1Xs2b7sHyJhVvghWFvrAboXWNBRsvgU2kFqsZUEzLzp9fx1qPDdUArLDahZqJfiDKkfqpd+Hf8zOvfxb81f/gU=&lt;/diagram&gt;&lt;/mxfile&gt;" onclick="(function(svg){var src=window.event.target||window.event.srcElement;while (src!=null&amp;&amp;src.nodeName.toLowerCase()!='a'){src=src.parentNode;}if(src==null){if(svg.wnd!=null&amp;&amp;!svg.wnd.closed){svg.wnd.focus();}else{var r=function(evt){if(evt.data=='ready'&amp;&amp;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&amp;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>

标签： javascripthtmlcssdom