javascript - 在滚动条上沿圆形路径移动 div

Question

我有一个圆形容器 div，其中包含多个 div，其圆周上带有文本。我需要在滚动的任一方向上沿圆周将文本 div 移入和移出 View 。

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

<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 并使用转换定位它们。

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/圆圈在模态框内。

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