如何阻止滑块根据 div 的高度改变其位置？答案

【问题标题】：How to stop a slider from changing its position according to the height of a div?如何阻止滑块根据 div 的高度改变其位置？
【发布时间】：2021-08-14 19:34:55
【问题描述】：

let Container = document.getElementById("Container1");
let slider = document.getElementById("slider1");

Container.setAttribute("style", "height: " + slider.value + "px");

slider.oninput = function() {
  Container.setAttribute("style", "height: " + this.value + "px");
};

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#Container1 {
  width: 160px;
  height: 90px;
  border: 1px solid #000;
}

#slider1 {
  -webkit-appearance: none;
  background-color: black;
  width: 90px;
  height: 1px;
  transform: translateX(-50%) translateX(0.5cm) rotate(90deg);
  transform-origin: center;
}

<div class="container">
  <div id="Container1"></div>
  <input type="range" min="0" max="90" id="slider1" />
</div>

在这里，滑块似乎随着它旁边的 div 元素的高度而改变了它的位置。为什么会这样？如何阻止它？在我的尝试中，我尝试设置.container {height: 90px;}，原来的问题得到了解决，但发生了一些奇怪的事情。为什么会这样？谢谢！

【问题讨论】：

标签： html css slider height

【解决方案1】：

let Container = document.getElementById("Container1");
let slider = document.getElementById("slider1");

Container.setAttribute("style", "height: " + slider.value + "px");

slider.oninput = function() {
  Container.setAttribute("style", "height: " + this.value + "px");
};

滑块改变了 Container 的高度，因为您将 Containers 的高度属性设置为滑块值。删除这些 javascript 行，滑块将停止更改容器的高度。

javascript 代码监听滑块上的输入，当滑块移动时，容器高度属性将设置为this.value。在这种情况下，this 指的是滑块。

【讨论】：

滑块是用来改变容器高度的，移动位置是无意的。我想删除它，我该怎么做？您的回答无视设置滑块的动机。

【解决方案2】：

试试这个

我将高度放在主 div 上，所以所有内容都保留在静态 div 中。

和transform: translateY(-50%) translateY(1.2cm) 将 Y 转换为 1.2cm

align-items: start; 所以项目位于容器的开头

let Container = document.getElementById("Container1");
let slider = document.getElementById("slider1");

Container.setAttribute("style", "height: " + slider.value + "px");

slider.oninput = function() {
  Container.setAttribute("style", "height: " + this.value + "px");
};

.container {
    display: flex;
    justify-content: flex-start;
    align-items: start;
    height: 90px;
}

#Container1 {
  width: 160px;
  height: 90px;
  border: 1px solid #000;
}

#slider1 {
    -webkit-appearance: none;
    background-color: black;
    width: 90px;
    height: 1px;
    transform: translateX(-50%) translateX(0.5cm) translateY(-50%) translateY(1.2cm) rotate(90deg);
    transform-origin: center;
}

<div class="container">
  <div id="Container1"></div>
  <input type="range" min="0" max="90" id="slider1" />
</div>

【讨论】：