CSS动态地将Div移动到圆心

Question

我正在尝试在我的React应用程序中重新创建此图像：

到目前为止，这就是我所拥有的：

App.js

import React, { Component } from 'react';
import './AppStyle.scss';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { testWidth: 0 };
  }

  componentDidMount() {
    this.setState({ testWidth: (this.myInput.offsetWidth + this.mySpan.offsetWidth)*.3 });
  }

  render() {
    const { testWidth } = this.state;
    return (
      <div className="container">
        <span className="test" style={{top: "17px", left: testWidth}}>30%</span>
        <div className="wrapper">
          <span className="num" ref={div => {this.mySpan = div}}>5</span>
          <input ref={input => {this.myInput = input}} type="range" value="30" id="rangeInput" readOnly />
          <span className="num">15</span>
        </div>
      </div>
    );
  }
}

export default App;

App.scss

.container {
  position: relative;
  width: 100%;
}

.wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.test {
  position: absolute;
  z-index: 100;
}

.num {
  width: 5%;
  font-size: 150%;
  text-align: center;
}


input[type='range'] {
  box-sizing: border-box;
  border: 0px solid transparent;
  padding: 0px;
  margin: 0px;
  width: 90%;
  height: 50px;
  background: -webkit-repeating-linear-gradient(90deg, #000000, #000000 1px, transparent 1px, transparent 60px) no-repeat 50% 50%;
  background: repeating-linear-gradient(90deg, #000000, #000000 1px, transparent 1px, transparent 60px) no-repeat 50% 50%;
  background-size: 90% 15px;
  font-size: 16px;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
  box-sizing: border-box;
  width: 200px;
  height: 5px;
  border-radius: 2px;
  background: #000000
}

input[type='range']::-webkit-slider-thumb {
  border: 2px solid #00B0FA;
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.98);
  -webkit-appearance: none;
  margin-top: -23.05px;
}

这是一个小提琴：

https://jsfiddle.net/69z2wepo/96287/

我无法通过类测试获得我的span元素以始终找到圆的中心。如您所见，我使用ref来获取输入的宽度和第一个跨度。我希望我在componentDidMount中的数学能够正常工作但不幸的是没有。此外，我意识到如果用户调整屏幕大小，那么数学实际上是关闭的。一个优点是该范围被禁用，因此不必担心滑块移动。另外，我只支持Chrome / Safari。

Answer 1

我把你的小提琴https://jsfiddle.net/Lzq561f8/1/分叉了

并得到了适合所有价值观的正确方程式

testWidth: (this.myInput.offsetWidth * 0.3) - (50 * 0.3)
(input width * Value) - ( slider-thumb width * value )

使用此等式，您将使其以所有值为中心值为0的输入范围slider-thumb将具有与左侧相同的值：0但是在值100处，它将具有与left : calc( 100% - it's width )相同的css值和相同的比例left: calc( value - width/value )

Answer 2

在这个答案中，我将重复我在评论部分提到的内容。我希望这会提供更多的清晰度。

添加以下css属性

.test {
  position: absolute;
  z-index: 100;
  top: 32%;
  left: 31.5%;
}

在你的babel + JSX部分中，使用class =“test”删除元素的style属性

<span class="test">30%</span>

以下是我建议您进行的更改 我做了这些修改，并在你的小提琴中验证了这一点，当我调整屏幕尺寸时，它可以工作。如果您仍然面临问题，请告诉我。

在引入此修复后，我在调整屏幕大小时得到的输出

更新

我已将您的JSfiddle分叉到我的jsfiddle帐户并更新了修复程序。 这是我修复的小提琴 https://jsfiddle.net/Divine/48ky8yzw/2/ 如果有效，请告诉我。

Answer 3

我认为它没有出现在正确位置的原因是因为你的数学略有偏差。你有(this.myInput.offsetWidth + this.myDiv.offsetWidth)*.3但我想你可能想要(this.myInput.offsetWidth*.3 + this.myDiv.offsetWidth)。您需要将完整的myDiv宽度添加到myInput宽度的30％。

编辑 - 忘记解决调整大小问题：

我对反应不是很熟悉，但是为了在调整窗口大小时调整它，你需要监听resize事件并重新计算位置。这是一个小提琴：https://jsfiddle.net/ay1qrwok/