javascript - 中间而不是末端的最大比例

Question

在下面的代码片段中，我试图实现一种效果，其中出现在可见滚动部分中间的 div 是全尺寸 scale(1); 和另一个 div 在接近边缘时向 scale(0); 的缩放衰减。

我在应该显示全尺寸 div 的中间画了一个调试框。

var viewport = {
  x: $("#scroll").scrollLeft(),
  width: $("#scroll").width(),
}

$("#scroll").scroll(function() {
  viewport.x = $("#scroll").scrollLeft();
  recalculateScale();
});

recalculateScale();

function recalculateScale() {
  $("#example > div").each(function() {
    let middleOfThis = ($(this).position().left + ($(this).width() * 0.5)); // calculate from the middle of each div
    let scale = Math.sin(middleOfThis / $("content").width());

    $(this).css('transform', 'scale(' + scale + ')');
  });
}

content {
  position: relative;
  display: block;
  width: 500px;
  height: 100px;
}

content::after {
  content: '';
  position: absolute;
  display: block;
  width: 20%;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

#scroll {
  display: block;
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  border: 1px solid #000;
}

#example {
  display: block;
  width: 200%;
  height: 100%;
  font-size: 0;
  overflow: none;
}

#example>div {
  display: inline-block;
  width: 10%;
  height: 100%;
  background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<content>
  <div id="scroll">
    <section id="example">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </section>
  </div>
</content>

目前比例尺从#example的最左边到右边。我知道在计算 Math.sin 之前，我需要将视口(viewport)尺寸考虑到方程中，我只是不太正确。

---

注意:没有箭头功能，因为我必须针对 IE11。

Answer 1

两个问题:

• 虽然 .position().left 返回元素在 缩放后的呈现位置，但 .width() 返回元素的宽度不考虑缩放。显然，这种不同的测量方式会导致计算出错误的中点。请改用 .getBoundingClientRect().width:这将考虑当前缩放

• 使用三 Angular 函数时，您需要确保参数代表以弧度表示的 Angular 。在您的代码中，值的范围从 0 到 1，而正弦的最大值不是 0.5，而是 π/2。因此，您应该执行与 π 的乘法以获得所需的结果。

这里是修改后的代码:

var viewport = {
  x: $("#scroll").scrollLeft(),
  width: $("#scroll").width(),
}

$("#scroll").scroll(function() {
  viewport.x = $("#scroll").scrollLeft();
  recalculateScale();
});

recalculateScale();

function recalculateScale() {
  $("#example > div").each(function() {
    // 1. Use different way to read the width: this will give the rendered width 
    // after scaling, just like the left position will be the actually rendered 
    // position after scaling:
    let middleOfThis = $(this).position().left 
                     + this.getBoundingClientRect().width * 0.5; 
    // 2. Convert fraction to a number of radians:
    let scale = Math.sin(middleOfThis / $("content").width() * Math.PI);

    $(this).css('transform', 'scale(' + scale + ')');
  });
}

content {
  position: relative;
  display: block;
  width: 500px;
  height: 100px;
}

content::after {
  content: '';
  position: absolute;
  display: block;
  width: 20%;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

#scroll {
  display: block;
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  border: 1px solid #000;
}

#example {
  display: block;
  width: 200%;
  height: 100%;
  font-size: 0;
  overflow: none;
}

#example>div {
  display: inline-block;
  width: 10%;
  height: 100%;
  background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<content>
  <div id="scroll">
    <section id="example">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </section>
  </div>
</content>

注意:由于浮点精度限制，中点的计算可能会漏掉小数部分。这将是如此之小，以至于它不应该对实际像素距离产生影响，但是预先计算元素的中心不会有什么坏处，因此您始终使用相同的值。