如何在使用jquery / css动态显示周围元素的同时保持当前屏幕位置

例如，我有一个段落，我希望用户关注。我希望能够在段落周围加载周围的文本，而不会移动屏幕并失去它们的位置。这可能吗？

<html>
<head>
    <style type="text/css">
        .hidden
        {
            display: none;
        }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
    <div class='hidden'>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
    <div>Text I want to keep anchored to</div>
    <br/><br/>
    <a href="javascript:$('.hidden').show()">show</a>
    <div class='hidden'>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
</body>
</html>

您可以为每个容器设置固定高度并切换其可见性。

max-height: 100px;

在这里看小提琴

我最初没有走这条路，因为我认为滚动时会有一些"闪烁"。我试过了，没有看到任何。

这几乎可以找出你与元素的关系，当它周围的元素被显示时，它会将你移回原来的位置。

我注意到此解决方案存在两个问题：

它似乎只差一根头发。我不知道为什么。几乎不引人注意。
在我的Mac上使用Chrome 38，显然存在重绘问题。如果运行此代码，刷新并再次运行它，它将滚动到页面顶部。如果您在窗口上稍作移动，它将刷新回需要的位置。显然，有一些重新绘制的WebKit问题在起作用。

希望对某人有所帮助。如果有更好的解决方案，我希望看到它。

<script type="text/javascript">
    function showFullContent()
    {
        var windowTop = $(window).scrollTop();
        var elementTop = $('.target').offset().top;
        var delta = windowTop - elementTop;
        $('.hidden').show();
        var newElementTop = $('.target').offset().top;
        $(window).scrollTop(newElementTop + delta);
    }
    $( document ).ready(function() {
        $('.hidden').hide();
    });
</script>

相关内容

最新更新

热门标签：