元素隐藏在滚动块区域内

Question

我发现一个行为，当我们使用溢出滚动内容并尝试更改子元素的水平位置时，根块的宽度会增加，只有滚动到根的末尾我们才能看到更改的子元素块。

所以我的问题是：如何使只出现垂直滚动，以便有机会更改子元素的位置，使它们在根块之外可见？ 下面的示例显示

strong

元素增加了

.block

元素的宽度，它使水平滚动更加平缓，并隐藏在该元素内部，但不偏移到外部。

源代码：

.block {
  position: absolute;
  width: 300px;
  max-height: 100px;
  background: cyan;
  overflow-y: auto;
  overflow-x: auto;
  padding: 10px;
}

strong {
  position: absolute;
  left: 300px;
}

<div class="block">
  <div class="item-content">some text some text some text some text some</div>
  <div class="item-content">some text some text some text some text some</div>
  <div class="item-content">some text some text some text some text some</div>
  <div class="item-content">
    <div>some text some text some text some text some</div>
    <strong>some text</strong>
  </div>
</div>

Answer 1

我发现的最佳解决方案是使用

position: fixed

。然后你应该编写以下JS代码来控制项目的位置。如果上下文菜单项具有可滚动子菜单，则此函数是精算的：

import { DomHandler } from 'primevue/utils';

const { getViewport } = DomHandler

export default function nestedPosition(element) {
    if (element) {
        let { left, top, width, height } = element.getBoundingClientRect()

        const parentItem = element.parentElement;
        const parentItemClientRect = parentItem.getBoundingClientRect()

        top = parentItemClientRect.top
        left = parentItemClientRect.width + left

        const viewport = getViewport();

        if (left + width > viewport.width) {
            left = parentItemClientRect.left - width
        }

        if (top + height > viewport.height) {
            top -= height - parentItemClientRect.height
        }


        element.style.top = `${top}px`;
        element.style.left = `${left}px`;
    }
}

并且还使用 CSS 作为示例来说明它如何出现在真实的上下文菜单中：

.p-contextmenu .p-submenu-list {
  position: fixed;
  max-height: 300px;
  min-width: 230px;
  max-width: 520px;
  overflow-y: auto;
  overflow-x: hidden;
}