小屏幕的 scaleY 属性未正确维护

Question

• 我正在尝试修复移动屏幕的 CSS 错误
• 当我单击第 1 节内容时打开，如果我移动到第 1 节内容的底部，然后单击第 1 节内容将关闭。
• 但我看不到第 2 部分，之后我看到第 3 部分，因为屏幕向上移动。
• 如何在我们的屏幕中保留第 2 部分。
• 我的 scaleY 属性有什么问题吗？
• 下面提供相关代码

我使用了 scrollIntoView 但仍然没有指向第二个任何想法？？？

我使用了 window.scrollTo(0, 0) 但仍然没有指向第二个任何想法？？？

 .television .chromecast .sun .sunItem > .bulb {
    overflow: hidden;
    transition: transform .5s, max-height .5s;
    transform: scaleY(0);
    box-sizing: border-box;
    max-height: 0;
    transform-origin: center top;
}

 .television .chromecast .sun .sunItem.selected > .bulb {
    transform: scaleY(1);
    max-height: 100%;
}

Answer 1

我们需要在选择函数上正确调用

onSelect() {
this.props.onSelect(this.props.id);
this.focusDiv();
}

Answer 2

这是预期的行为。滚动位置被保留，但您从屏幕顶部删除了内容，因此您最终会在页面中更靠下。

在扩展新元素时折叠以前的元素总是一个坏主意，尤其是在移动设备上。

要解决这个问题，您需要编写一个滚动到打开部分顶部的脚本。这可以很容易地使用jQuery.ScrollTo() 或类似的东西来实现，但老实说，我只会让前面的部分保持打开状态，除非用户有向上滚动的趋势并且需要大量滚动才能回到顶部的页面。滚动到顶部链接等其他 UX 解决方案可能会派上用场。