Я понимаю, что это может быть больше математический вопрос, чем вопрос программирования, но здесь стоит попытать счастья: у меня есть приложение, в котором часть непрозрачности экрана зависит от того, в какой момент ...

2
theJuls 6 Апр 2021 в 00:37

1 ответ

Лучший ответ

Первое, что я делаю, это масштабирую непрозрачность от 0 до 1, после чего я могу понять, как отрегулировать диапазон от 0,1 до 0,95.

scrollHeight и clientHeight являются фиксированными значениями, в то время как scrollTop изменяется. Я вижу:

scrollHeight: 1155
clientHeight: 283
scrollTop: from 0 to 872

Обратите внимание на максимум 872 для scrollTop. Это разница между scrollHeight и clientHeight (1155 - 283 = 872).

Итак, теперь мы можем вычислить от 0 до 1 в зависимости от того, где scrollTop находится между 0 и scrollHeight - clientHeight.

const opacityValue = scrollTop / (scrollHeight - clientHeight);

Затем нам нужно настроить это значение с 0,1 до 0,95. Спред составляет 0,85, поэтому мы можем умножить его на 0,85, а затем добавить 0,1.

const opacityValue = 0.1 + (0.85 * scrollTop) / (scrollHeight - clientHeight);

Вот модифицированная демонстрация:

const App = () => {
  const [opacity, setOpacity] = React.useState(0.1);
  const [params, setParams] = React.useState({})
  const calculateOpacityOnScroll = (evt) => {
    const { scrollHeight, scrollTop, clientHeight } = evt.target;
    const opacityValue = 0.1 + (0.85 * scrollTop) / (scrollHeight - clientHeight);
    setOpacity(opacityValue);
        setParams({scrollHeight, scrollTop, clientHeight})
  };
  
  const incorrectMessage = opacity !== 0.1 && params.scrollTop === 0
    ? <span style={{ color: 'red' }}> This is incorrect! At the top, it must be 0.1!</span>
    : null

  return (
  <div>
   
    <div className='params'>
           <div
      className='sample'
      style={{
        background: 'blue',
        opacity
      }}>Sample</div>
      <h4>Opacity: {opacity} {incorrectMessage}</h4>
      <h4>scrollTop: {params.scrollTop || 0}</h4>
      <h4>scrollHeight: {params.scrollHeight || '?'}</h4>
      <h4>clientHeight: {params.clientHeight || '?'}</h4>
    </div>
       
    <div className='content' onScroll={calculateOpacityOnScroll}>
      <h4 style={{ zIndex: 200 }}>Scroll here!</h4>
      <p style={{ zIndex: 200 }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <p style={{ zIndex: 200 }}>Et tortor consequat id porta nibh venenatis. Consequat id porta nibh venenatis cras sed felis. Porttitor rhoncus dolor purus non. Eu turpis egestas pretium aenean pharetra magna. Eget velit aliquet sagittis id consectetur purus ut. In mollis nunc sed id semper risus in hendrerit gravida. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Bibendum enim facilisis gravida neque convallis a cras semper. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Gravida neque convallis a cras semper auctor neque vitae. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci. Ornare massa eget egestas purus viverra accumsan in. Venenatis cras sed felis eget velit aliquet. Felis imperdiet proin fermentum leo vel orci porta. Commodo elit at imperdiet dui accumsan sit amet nulla. Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc.
    </p>
    </div>
  </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);
.params {
  position: fixed;
  top: 0;
  left: 250px;
}

.sample {
  width: 100px;
  height: 100px;
}

.content {
  border: solid 1px red;
  z-index: 200;
  width: 200px;
  height: 300px;
  
  overflow: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
1
Linda Paiste 5 Апр 2021 в 22:18