时间戳

首页 > 解决方案 > 如何根据内容更改我的 css 溢出？

javascript - 如何根据内容更改我的 css 溢出？

问题描述

我正在使用 CSS 制作自己的下拉菜单。你将鼠标悬停在它上面，然后它下面会出现一些选项，你选择一个就可以了。如果有太多选项无法容纳，则有一个滚动条。你可以在这里看到整个事情：JSFiddle

let testData = [
    "qwertyuiop",
    "asdfghjkl",
    "zxcvbnm",
    "axdxfcbhdhvhv",
    "äöäööäöääöää",
    "zoinkszoinks",
    "brrrrrrrrrr",
    "gygygygyasdasda",
];

getTestStuff();

function getTestStuff() {
    let content = document.getElementById("content");
    let text = document.getElementById("text");
    for (let group of testData) {
        let div = document.createElement("div");
        div.innerHTML = group;
        div.addEventListener("click", function() { 
            text.innerHTML = group; // update button text
        }, false);

        content.appendChild(div);
    }
}

let dropdown = document.getElementById("dropdown");
let arrow = document.getElementById("arrow");
let content = document.getElementById("content");
dropdown.addEventListener("mouseenter", function () {
    arrow.className = "open";
    content.classList.add("open");
}, false); 

dropdown.addEventListener("mouseleave", function () {
    arrow.className = "closed";
    content.classList.remove("open");
}, false); 
.dropdown-wrapper {
    height: 40px;
    float: left;
    margin: 0px 5px;
}

.dropdown-wrapper, .dropdown-content {
    width: 300px;
}

.dropdown-wrapper .header {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #f1f1f1;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
    border: 1px solid grey;
    display: table; 
}

.dropdown-wrapper .header span {
      text-align: center;
      vertical-align: middle;
      display: table-cell;
      width: 100%;
}

.dropdown-wrapper .header div span {
    font-size: 20px;
}

.dropdown-wrapper .header div {
    margin-left: -40px;
    width: 40px;
    height: 40px;
    float: right;
    text-align: center;
    display: table;
    position: absolute;
}

.dropdown-content {
    display: none;
    float: none;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    font-size: 16px;
    background-color: #f1f1f1;
    min-width: 0px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-right: auto;
    text-align: center;
}

.dropdown-content div {
    color: black;
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    margin-right: -15px;
}

.dropdown-content div:hover {
    background-color: #ddd;
}

.dropdown {
    height: 100%;
    width: 100%;
}

.dropdown:hover .dropdown-content {
    display: block;
}


#arrow.open {
    -webkit-animation-name: openArrowAnimation;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}

#arrow.closed {
    -webkit-animation-name: closeArrowAnimation;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes openArrowAnimation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}

@-webkit-keyframes closeArrowAnimation {
  from {
    -webkit-transform: rotate(180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}

#content.open {
    -webkit-animation-name: openDropdownAnimation;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes openDropdownAnimation {
  from {
    max-height: 0px;
  }
  to {
    max-height: 300px;
  }
}
 <div class="dropdown-wrapper">
     <div class="dropdown" id="dropdown">
         <div class="header">
             <span id="text">Test Thing</span>
             <div id="arrow"><span>^</span></div>
         </div>
         <div id="content" class="dropdown-content">
         </div>
     </div>
</div>

问题：

  1. 滚动条出现在我的动画过程中。这不是问题，如果它会留下来，但是当内容适合时，它会再次消失。

  2. 当滚动条不存在时，当我将鼠标悬停在选项上时，滚动条将占用的空间没有正确的背景颜色。造成一个非常难看的差距。

我知道，overflow: auto;但我仍然在孩子身上使用overflow: scroll; with margin-right: -16px;，因为我的滚动条会移动孩子，而我有时只有那个滚动条。

overflow如果我们不需要它，我需要某种 CSS 条件黑客设置为隐藏，或者使用 JS 来更改，margin-right但在添加孩子后尝试检查父级高度给了我这个：

内容高度：未定义

content.style.height：空字符串

所以我很迷茫。

标签： javascripthtmlcss

解决方案

正如@CBroe 指出的那样，我无法获得元素或孩子的高度，因为它必须display: none绕过它：

let content = document.getElementById("content");
content.style.display = "block";
let height = content.offsetHeight;
content.style.display = "";

令人惊讶的是，这个笨蛋的效果如此之好。现在我可以在不需要滚动条时隐藏它并修复滚动条创建的偏移量，当我确实需要它时：

if (height < 300) {
    content.style.overflowY = "hidden";
} else {
    content.style.overflowY = "scroll";
    for (let kid of content.children) {
        kid.style.marginRight = "-16px";
    }
}

这个解决方案还有一个额外的好处，它适用于我的动画。仅 CSS 解决方案无法解决的问题。

推荐阅读