随着滚动移动div沿着圆形路径移动

Question

我有一个圆形容器div，周围有多个带文本的div。我需要在滚动时沿着圆周向左或向右移动文本div以使其进入或退出视图。

我使用d3.js选择和样式化了圆形容器div，并将其放置在一个设置了overflow-y为自动的较小包装div中。

<div id="circle-out-container-wrapper"><div id="circle-out-container"></div></div>

var radius = Math.floor(document.documentElement.clientHeight * 1.5);
d3.select('#circle-out-container-wrapper')
  .style('overflow-y', 'auto')
  .style('overflow-x', 'hidden')
  .style('width', '80%')
  .style('height', '400px')
  .style('left', '0')
  .style('top', '0')
  .style('position', 'absolute');

d3.select('#circle-out-container')
  .style('background-color', 'transparent')
  .style('position', 'absolute')
  .style('box-sizing', 'border-box')
  .style('display', 'block')
  .style('border', '1px solid #bce8f1')
  .style('border-radius', '50%')
  .style('width', (radius * 2) + "px")
  .style('height', (radius * 2) + "px")
  .style('left', Math.floor(-(radius * 5) / 3) + "px")
  .style('top', Math.floor(-(radius * 2) / 3) + "px");

然后我添加文本div并使用transform定位它们。

var params = [];
for (var i = 30; i >= 0; i--) {
  params.push(i);
}

var nums = d3.select("#circle-out-container")
  .selectAll("div.nums")
  .data(params)
  .enter()
  .append("div")
  .attr("class", "circle")
  .style("transform", function(d, i) {
    var angle = 20 - (i + 1) * (70 / (params.length + 1));
    return "rotate(" + angle + "deg) translate(" + radius  + "px, 0) rotate(" + -angle + "deg)";
  })
  .text(function(d) { return d });

这是我滚动文本div的方法：

$('#circle-out-container-wrapper').scroll(function() {   
  b.style("transform", function(d, i) {
    var scroll = $('#circle-out-container-wrapper').scrollTop();
    var angle = scroll - (i + 1) * (40 / (params.length + 1));
    return "rotate(" + angle + "deg) translate(" + radius  + "px, 0) rotate(" + -angle + "deg)";
  })
});

容器圆必须是静态的，只显示大约一半。此时，当滚动文本 div 时，您也会滚动圆形容器 div，并且显示的弧线会发生变化。如何保持所有内容不变，并仅在滚动时沿着圆形路径移动文本 div？这里提供了一个 fiddle: http://jsfiddle.net/00drii/etnkLkL3/3/，圆圈在 modal 内部。

- 00dri

Answer 1

我从未使用过d3.js，但您需要将包含数字的div放在需要滚动的容器之外。

<div id="app">
    <!-- container -->
    <div id="scroll-container">
        <!-- content of the scroll -->
        <div class="content"></div>
    </div>

    <!-- the numbers should be inside this div -->
    <div id="canvas">
    </div>
</div>

这里有一个例子，根据您的需求进行调整。

$(function () {

  var radius = 200;
  var cant = 36;
  var i;
  var $circle;
  var $scrollcont = $("#scroll-container");
  var $canvas = $("#canvas");

  //---Create circles
  for(i = 0; i < cant; i++){

      $circle = $("<div/>");
      $circle.attr("data-index", i).addClass("circle").text(i + 1);

      $canvas.append($circle);

  }

  var $circles = $canvas.find(".circle");

  //---Update circles position
  function updateCirclesPosition(){

      //---Scroll value
      var scroll = $scrollcont.scrollTop();

      //---Vars
      var index;
      var radian;
      var posx;
      var posy;

      $circles.each(function(){

          index = Number( $(this).attr("data-index") );
          radian = ((index * 10 + scroll / 10) * Math.PI) / 180;
          posx = Math.cos( radian ) * radius;
          posy = Math.sin( radian ) * radius + radius;

          $(this).css("transform", "translate(" + posx + "px, " + posy + "px)");

      });  

  }

  //---On scroll event
  $("#scroll-container").on("scroll", updateCirclesPosition);

  updateCirclesPosition();

});

#app, #scroll-container, #canvas{
    height: 400px;
    width: 400px;
}
#app{
    position: relative;
}
#scroll-container{
    overflow-y: scroll;
    position: relative;
    z-index: 1;
}

#scroll-container .content{
    height: 5000px;
}

#canvas{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

#canvas .circle{
    background: #666;
    border-radius: 50%;
    -moz-border-radius: 50%;
    color: #FFF;
    font-family: Arial;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    text-align: center;
    width: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div id="app">
    <div id="scroll-container">
        <div class="content"></div>
    </div>
    <div id="canvas">
    </div>
</div>

JSFiddle

- ElChiniNet