如何控制一个元素滚动另一个元素

Question

正如你可以看到我的html的结构，我试图将光标定位在屏幕的左列并向下滚动，这样我希望它滚动到右侧，而不是在正文内滚动并转到页脚。当内容结束时，将显示我的页面的页脚。我不知道我是否理解自己，但我希望当我将自己定位在两列中并滚动时，具体显示右列的内容。

这里我展示了我的 html、css 和 JavaScript 代码。也许有什么东西阻止了我想做的事情。然而，目前我没有任何其他想法。

document.addEventListener('DOMContentLoaded', function() {
  var column1 = document.getElementById('column-1');
  var column2 = document.getElementById('column-2');

  column1.addEventListener('scroll', function() {
    column2.scrollTop = column1.scrollTop;
  });
});

html {
  height: 100%;
  width: 100%;
  background-color: brown;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.content {
  background-color: bisque;
  display: flex;
  height: 100vh;
  overflow-y: auto;
}

.column-1 {
  width: 50%;
  text-align: center;
  border-right: 1px solid brown;
  overflow-y: auto;
  max-height: 100vh;
}

.brownie-img-container {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.title {
  margin: 0;
}

.brownie-img {
  width: 50%;
  border-radius: 50%;
  margin-top: 25vh;
}

.column-2 {
  width: 50%;
  text-align: center;
  padding: 10px;
  font-family: 'IBM Plex Sans', sans-serif;
  overflow-y: auto;
  max-height: 100vh;
}

.description {
  text-align: justify;
}

<div class="content" id="content">
  <div class="column-1" id="column-1">
    <img class="brownie-img" src="https://i.postimg.cc/xqDLpZxp/7e8da6ab74a9-brownie-de-chocolate-con-leche.png" alt="Brownie de Cacao">
  </div>
  <div class="column-2" id="column-2">
    <h1>Brownie de Cacao</h1>
    <h2>Descripción</h2>
    <div class="description">
      <p>"Lorem Ipsum Content..."</p>
    </div>
  </div>
</div>
<footer>
  <div class="footer-content">
    <p>&copy; 2023 Mi Sitio Web. Todos los derechos reservados.</p>
    <ul>
      <li><a href="#">Política de privacidad</a></li>
      <li><a href="#">Términos y condiciones</a></li>
    </ul>
  </div>
</footer>

Answer 1

首先，我添加了一些内容，以便出现滚动条。我的想法是使用

deltaY

事件处理程序的

wheel

参数来取消它而不调用滚动。

document.addEventListener('DOMContentLoaded', function() {
  var column1 = document.getElementById('column-1');
  var column2 = document.getElementById('column-2');

  column1.addEventListener('wheel', function(ev) {
    column2.scrollTop += ev.deltaY;
    ev.preventDefault();
  });
});

html {
  height: 100%;
  width: 100%;
  background-color: brown;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.content {
  background-color: bisque;
  display: flex;
  height: 100vh;
  overflow-y: auto;
}

.column-1 {
  width: 50%;
  text-align: center;
  border-right: 1px solid brown;
  overflow-y: auto;
  max-height: 100vh;
}

.brownie-img-container {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.title {
  margin: 0;
}

.brownie-img {
  width: 50%;
  border-radius: 50%;
  margin-top: 25vh;
}

.column-2 {
  width: 50%;
  text-align: center;
  padding: 10px;
  font-family: 'IBM Plex Sans', sans-serif;
  overflow-y: auto;
  max-height: 100vh;
}

.description {
  text-align: justify;
}

<div class="content" id="content">
  <div class="column-1" id="column-1">
    <img class="brownie-img" src="https://i.postimg.cc/xqDLpZxp/7e8da6ab74a9-brownie-de-chocolate-con-leche.png" alt="Brownie de Cacao">
  </div>
  <div class="column-2" id="column-2">
    <h1>Brownie de Cacao</h1>
    <h2>Descripción</h2>
    <div class="description">
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
    </div>
  </div>
</div>
<footer>
  <div class="footer-content">
    <p>&copy; 2023 Mi Sitio Web. Todos los derechos reservados.</p>
    <ul>
      <li><a href="#">Política de privacidad</a></li>
      <li><a href="#">Términos y condiciones</a></li>
    </ul>
  </div>
</footer>

这只是一个例子，实际动作是跳跃的。但我想我过去已经回答过关于滚动的另一件事。 如何在鼠标滚动时创建平滑的移动？

我将合并这个：

var column1 = document.getElementById('column-1');
var column2 = document.getElementById('column-2');



var speed = 0;
var lastUpdateTime = 0;

// try different numbers
var speedFactor = 5 

// must be active (not passive)
column1.addEventListener('wheel', function(ev) {
  speed = ev.deltaY / speedFactor;
  ev.preventDefault();
}, {
  passive: false
})

// a bad usage of the gameLoop...
function update(deltaTime) {
  const easingFactor = 0.9;
  speed *= easingFactor;
}

// this probably rounds the speed...
function render() {
  column2.scrollTop += speed
}

function gameLoop(currentTime) {
  const deltaTime = currentTime - lastUpdateTime;
  update(deltaTime);
  render();
  lastUpdateTime = currentTime;
  requestAnimationFrame(gameLoop);
}


requestAnimationFrame(gameLoop);

html {
  height: 100%;
  width: 100%;
  background-color: brown;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.content {
  background-color: bisque;
  display: flex;
  height: 100vh;
  overflow-y: auto;
}

.column-1 {
  width: 50%;
  text-align: center;
  border-right: 1px solid brown;
  overflow-y: auto;
  max-height: 100vh;
}

.brownie-img-container {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.title {
  margin: 0;
}

.brownie-img {
  width: 50%;
  border-radius: 50%;
  margin-top: 25vh;
}

.column-2 {
  width: 50%;
  text-align: center;
  padding: 10px;
  font-family: 'IBM Plex Sans', sans-serif;
  overflow-y: auto;
  max-height: 100vh;
}

.description {
  text-align: justify;
}

<div class="content" id="content">
  <div class="column-1" id="column-1">
    <img class="brownie-img" src="https://i.postimg.cc/xqDLpZxp/7e8da6ab74a9-brownie-de-chocolate-con-leche.png" alt="Brownie de Cacao">
  </div>
  <div class="column-2" id="column-2">
    <h1>Brownie de Cacao</h1>
    <h2>Descripción</h2>
    <div class="description">
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
      <p>"Lorem Ipsum Content..."</p>
    </div>
  </div>
</div>
<footer>
  <div class="footer-content">
    <p>&copy; 2023 Mi Sitio Web. Todos los derechos reservados.</p>
    <ul>
      <li><a href="#">Política de privacidad</a></li>
      <li><a href="#">Términos y condiciones</a></li>
    </ul>
  </div>
</footer>