Question

我正在尝试修复手机屏幕的CSS错误
当我点击第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

我们需要在select函数

上正确调用

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

Answer 2

这是预期的行为。滚动位置会保留，但您会从屏幕顶部删除内容，以便最终在页面中向下移动。

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

要解决此问题，您需要将滚动脚本编写到打开部分的顶部。这可以很容易地使用jQuery.ScrollTo()或类似的东西来实现，但说实话，我只是将前面的部分打开，除非用户有向后滚动的倾向，这需要大量滚动才能回到页面顶部。其他用户体验解决方案，如滚动到顶部链接，可能会派上用场来解决这个问题。

对于小屏幕，scaleY属性未正确维护

2 个答案: