javascript – 在滚动时沿着圆形路径移动div

2023年7月29日 300次阅读

我有一个带有多个div的圆形容器div,其圆周上有文本.我需要在滚动时沿着圆周的任一方向移动文本div进出视图.

我用d3.js选择并设置圆形容器div并将其放入一个较小的包装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并使用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？

这是一个小提琴：http://jsfiddle.net/00drii/etnkLkL3/3/圆圈在模态内.

最佳答案 我从来没有使用过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>

Here you have an example code根据您的需求进行调整.

点赞