时间戳

首页 > 解决方案 > 使元素可滚动正在切断内容

html - 使元素可滚动正在切断内容

问题描述

我正在开发一个经常使用工具提示的网络应用程序。该应用程序使用Bulma CSS 库和Bulma Tooltip Extension进行样式设置。我的应用程序中的某些元素具有内部滚动（其溢出-y 属性设置为“滚动”或“自动”）。将 overflow-y 设置为 'scroll'/'auto' 会自动将 overflow-x 设置为 'hidden （根据其他答案，这是不可避免的）。

这导致悬垂的工具提示被切断，如在此沙箱中所见：

虽然我知道不可能有可见的 x 溢出和可滚动的 y 溢出，但我想有一些解决方法/解决方案至少允许在可滚动元素中显示悬垂的工具提示。就我而言，允许在 x 轴上可见的悬垂更为重要（没有其他问题/答案解决/解决这个确切的问题）。

任何帮助将不胜感激。 

#testDiv {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 75px;
  overflow-y: auto; /* Delete Line to see full tooltip */
}

.button {
  margin: 10px;
}
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
  </head>
  <body>
    <div id="testDiv">
      <button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
    </div>
  </body>
</html>

.

标签： htmlcssuser-interfacescrollbulma

解决方案

您可以创建另一个具有默认溢出设置的div元素 ( )。.wrapper它将是您的容器#testDiv和.button.

现在，添加position: relative到.wrapper. .button现在可以绝对定位，就像它在内部#testDiv元素一样，但从技术上讲 - 它不是:)

#testDiv元素需要扩展为 100% 的宽度和高度，才能继承大小.wrapper

最后一步 - 添加一些 padding-top#testDiv以防止.button元素上的内容重叠。

看下面的代码：

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 75px;
}

#testDiv {
  height: 100%;
  width: 100%;
  padding-top: 50px;
  border: 1px solid black;
  overflow-y: auto; /* Delete Line to see full tooltip */
}

.button.tooltip {
  margin: 10px;
  position: absolute;
  top: 0;
  right: 0;
}
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
  </head>
  <body>
    <div class="wrapper">
      <button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
      <div id="testDiv">
        content
      </div>
    </div>
  </body>
</html>

我希望这个解决方案就足够了:)

推荐阅读