Как рассчитать размер между двумя размерами внутри блока и нарисовать линию с нужным отступом?

Question

Нужно верно расположить marked

let start = 20; // Значение может меняться
let end = 165; // Значение может меняться
let marked = 58; // Значение может меняться

$('.line').css('top', marked);

.container {
  width: 100px;
  height: 150px;
  border: 1px solid #333;
  position: relative;
}
.line {
  width: 100px;
  height: 1px;
  background: #333;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="line"></div>
</div>

Поправьте если я некорректно сформулировал вопрос

Answer 1

let start = 20; // Значение может меняться
let end = 165; // Значение может меняться
let marked = 58; // Значение может меняться

let height = $('.container').height();
let bottom = height * (marked - start) / (end - start);

console.log(bottom +'px');

$('.line').css('bottom', bottom +'px');

.container {
  width: 100px;
  height: 150px;
  border: 1px solid #333;
  position: relative;
}
.line {
  width: 100px;
  height: 1px;
  background: #333;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="line"></div>
</div>

Answer 2

Не совсем понимаю задачу. Тем не менее, постараюсь как-то вникнуть и что-то сообразить. Всё это решение ниже - "как есть насколько я понимаю задачу"

start 20 это 0px, end 165 это 150px в блоке, нужно просто как то соотнести числа в пиксели и найти сколько пикселей будет marked

Если start 20 это 0px, а end 165 это 150px, то:

Найдем разницу значений: 165-20

let start = 20;
let end = 165;

let rz = end - start
console.log('Разница значений:', rz);

Узнаем высоту родительского элемента container

let h = document.querySelector('.container').scrollHeight;
console.log('Высота контейнера:', h, 'px');

.container {
  width: 100px;
  height: 150px;
  border: 1px solid #333;
}

<div class="container">
  <div class="line"></div>
</div>

Узнаем, сколько в одном значении пикселей px

let start = 20;
let end = 165;

let rz = end - start
console.log('Разница значений:', rz);

let zpx = 150 / rz // (h / rz)
console.log('В одном значении кол-во px:', zpx);

Теперь, зная сколько в одном значении пикселей px и зная значение marked, мы можем вывести значение для свойства top элементу .line

let line = document.querySelector('.line') // Элемент, для которого находим значение для свойства 'top:'

let start = 20; // Значение может меняться
let end = 165; // Значение может меняться
let marked = 58; // Значение может меняться

// Узнаем разницу значений
let rz = end - start
console.log('Разница значений:', rz);

// Узнаем количество пикселей в одном значении
let zpx = 150 / rz
console.log('В одном значении кол-во px:', zpx);

// Найдем значение для свойство 'top:' для элемента `.line`
let linepx = marked * zpx
console.log('Кол-во px у marked:', linepx);

// Подставим это значение
line.style.top = linepx + 'px';

.container {
  width: 100px;
  height: 150px;
  border: 1px solid #333;
  position: relative;
}
.line {
  width: 100px;
  height: 1px;
  background: #333;
  position: absolute;
}

<div class="container">
  <div class="line"></div>
</div>

А теперь это всё сократим и выведем формулу:

let start = 20; // Значение может меняться
let end = 165; // Значение может меняться
let marked = 58; // Значение может меняться
let h = document.querySelector('.container').scrollHeight; // Высота контейнера

// Выведем значение для свойства 'top' по формуле
document.querySelector('.line').style.top = marked * (h / (end - start)) + 'px';

.container {
  width: 100px;
  height: 150px;
  border: 1px solid #333;
  position: relative;
}
.line {
  width: 100px;
  height: 1px;
  background: #333;
  position: absolute;
}

<div class="container">
  <div class="line"></div>
</div>

БЛОГ НА HUSL

Как рассчитать размер между двумя размерами внутри блока и нарисовать линию с нужным отступом?

Ответы (2 шт):