javascript - 构建了一个滚动 Controller ，需要反转它

Question

我的代码允许在底部垂直滚动以控制在顶部水平滚动。

我的 jsfiddle

您会看到颜色通过渐变变化。效果很好。问题是我似乎无法使逆函数起作用。在顶部水平滚动控制在底部滚动。

有什么想法吗？

这是让它工作的脚本:

// Add event listener for scrolling
$("#bottom").on("scroll", function bottomScroll() {
    var scrolledleft = parseInt($("#bottom").scrollTop()) * 1;
    console.log(scrolledleft + scrolledright)
    $("#top").scrollLeft(scrolledleft + scrolledright)
})

//Move right column to bottom initially
$("#top").scrollLeft($("#top").height())

//Get actual distance scrolled
var scrolledright = parseInt($("#top").scrollLeft())

Answer 1

您的事件处理程序需要暂时取消彼此，这样它们就不会同时触发。您想要根据当前 scrollLeft/(子 div 的宽度 - 容器的宽度)计算您的位置百分比，然后将该百分比应用于其他元素，同样适用于顶部/高度。另外，我在 CSS 中将 #top 的高度更改为 50%。

var handler = function (e) {
  var src = e.target;
  
  // the first element that triggers this function becomes the active one, until it's done
  if (!activeScroller) activeScroller = src.id;
  else if (activeScroller != src.id) return;
  
  var $b = $("#bottom");
  var $t = $("#top");

  var scrollH = $("#bottom-content").height() - $b.height();
  var scrollW = $("#top-content").width() - $t.width();

  var scrollPct = 0;

  if (src.id == "top") {
    if (scrollW > 0) {
      scrollPct = $t.scrollLeft() / scrollW;
    }

    $b.scrollTop(scrollH * scrollPct);
  } else {
    if (scrollH > 0) {
      scrollPct = $b.scrollTop() / scrollH;
    }

    $t.scrollLeft(scrollW * scrollPct);
  }
  
  // give all animations a chance to finish
  setTimeout(function () { activeScroller = ""; }, 100);
};
var activeScroller = "";
$("#top,#bottom").on("scroll", handler);

#top {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 50%;
  position: fixed;
  overflow: auto;
  background: red;
}

#top-content {
  height: 100%;
  width: 2000px;
  background: linear-gradient(90deg, red, blue);
}

#bottom {
  position: absolute;
  margin: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  position: fixed;
  overflow: auto;
  background: green;
  z-index: 100;
}

#bottom-content {
  height: 2000px;
  width: 100%;
  background: linear-gradient(0deg, orange, green);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="top">
  <div id="top-content"></div>
</div>
<div id="bottom">
    <div id="bottom-content"></div>
</div>