我想构建一个页面，其中并排显示两篇文章，并使原始文章的屏幕截图（位于左侧）根据拖动条的位置更改位置，并且在执行时不更改其宽度所以。
我基本上只是从 CodePen 的免费示例中复制了代码。然后把我截的文章截图的
Height
和
Width，从“宽度：px；高度：px”改为“宽度：100%；高度：100%”，这样就永远适合拖动条 div 的比例。我开始编写一个函数，但停止了，因为我对编程非常陌生，并且我并不真正知道我拥有的所有选项，以便更改 CodePen 中的函数，以便它们将应用于位置，而不是偏移量宽度。
非常感谢！=）
这是我需要更改的函数才能获得效果（可能）：
left.style.width = (e.pageX - bar.offsetWidth / 2) + 'px';
这是一个不应该这样的例子（挤压）：当它应该用拖动条移动（离开屏幕）时。
谢谢！！
代码：
// DRAG BAR (IMAGE) //
var left = document.getElementById('drag-left');
var right = document.getElementById('drag-right');
var dragbar = document.getElementById('dragbar');
var i = document.querySelector('image');
const drag = (e) => {
document.selection ? document.selection.empty() : window.getSelection().removeAllRanges();
left.style.width = (e.pageX - dragbar.offsetWidth / 2) + 'px';
}
dragbar.addEventListener('mousedown', () => {
document.addEventListener('mousemove', drag);
});
dragbar.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', drag);
});
// Unfinished function
/ function moveLeft () {
// if (dragbar.document.addEventListener(drag)) {
// document.getElementById('drag-left').style.left = "-20%"
// }
// } //* DRAG BAR (IMAGE) */
.drag-container {
display: flex;
min-height: 100vh;
}
[class^="panel"] {
padding: 0px 0px;
background-color: white;
}
.panel-one {
width: 48%;
}
.panel-two {
flex: 1;
width: 52%;
}
.dragbar {
position: relative;
padding: 20px;
cursor: pointer;
background-color: rgb(25, 0, 75);
}<!DOCTYPE html>
<html>
<head>
<!-- DRAG BAR (IMAGE) / CSS -->
<link rel="stylesheet" ; href="copy2.css">
<title>Copy</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- DRAG BAR (IMAGE) -->
<div class="drag-container">
<div class="panel-one" ; id="drag-left">
<img src="Avatar Swamp.jpg" ; width="119.1%" ; height="100%">
</div>
<div class="dragbar" ; id="dragbar">
<div class="slider" ; style="top: 50vh; position: sticky;"></div>
</div>
<div class="panel-two" ; id="drag-right" ; style="font-family: Open Sans, sans-serif;">
<div class="container">
<div>
<header style="text-align: center;">
<h1 style="padding-top: 2%;">Title</h1>
<p style="padding-top: 2% ; padding-bottom: 1.6%;">By Spongebob</p>
<hr>
<p style="padding-top: 2%;">Blah blah blah, some text to fill the space.</p>
</header>
</div>
</div>
</div>
</div>
<!-- DRAG BAR (IMAGE) -->
<script src="copy2.js"></script>
</body>
</html>
const drag = (e) => {
document.selection ? document.selection.empty() : window.getSelection().removeAllRanges();
var newPosition = e.pageX - dragbar.offsetWidth / 2;
left.style.left = newPosition + 'px';
}
稍微调整一下CSS：
.panel-one {
position: absolute;
width: 48%;
}