Question

我试图使用jQuery滚动到包装元素内的特定元素。只要屏幕宽度没有调整大小，它就像我打算一样工作。一旦屏幕宽度改变，滚动就不会粘住。这是我目前的代码：

的Javascript

function pageInit(pageId)
{
    $('.page-wrapper').animate({ scrollLeft: $('#' + pageId).offset().left }, 500);
    $('#' + pageId).css('postion', 'fixed');
    console.debug('Page #' + pageId + ' initiated.');
}

pageInit('about');

HTML

<div class="page-wrapper">
<div class="page main-page" id="root" data-pos="0">
    <div class="group-container">
        <div class="book"></div>
        <div class="promo">
            <div class="button">
                <a href="/about">
                <div class="button-logo cover-button-logo"></div>
                <div class="button-text">Read the summary</div>
                </a>
            </div>

            <div class="button">
                <a href="#" onclick="return false;">
                <div class="button-logo yt-button-logo"></div>
                <div class="button-text">Watch the trailer</div>
                </a>
            </div>

            <div class="button">
                <a href="#" onclick="return false;">
                <div class="button-logo wattpad-button-logo"></div>
                <div class="button-text">Coming soon on Wattpad</div>
                </a>
            </div>

            <div class="button">
                <a href="//localhost/internals/close_tab" target="twitter">
                <div class="button-logo twitter-button-logo"></div>
                <div class="button-text">#Ghifari160sBeingTheOne</div>
                </a>
            </div>

            <div class="button">
                <a href="//localhost/internals/close_tab" target="facebook">
                <div class="button-logo facebook-button-logo"></div>
                <div class="button-text">Share it on Facebook</div>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="page about-page" id="about" data-pos="100">
    <div class="group-container">
        <div class="summary">
            %Summary%
        </div>
        <div class="promo">
            <div class="button">
                <a href="#" onclick="return false;">
                <div class="button-logo yt-button-logo"></div>
                <div class="button-text">Watch the trailer</div>
                </a>
            </div>

            <div class="button">
                <a href="#" onclick="return false;">
                <div class="button-logo wattpad-button-logo"></div>
                <div class="button-text">Coming soon on Wattpad</div>
                </a>
            </div>

            <div class="button">
                <a href="//localhost/internals/close_tab" target="twitter">
                <div class="button-logo twitter-button-logo"></div>
                <div class="button-text">#Ghifari160sBeingTheOne</div>
                </a>
            </div>

            <div class="button">
                <a href="//localhost/internals/close_tab" target="facebook">
                <div class="button-logo facebook-button-logo"></div>
                <div class="button-text">Share it on Facebook</div>
                </a>
            </div>
        </div>
    </div>
</div>

包装元素应向右滚动，直到ID为＆＃34; about＆＃34;填满整个屏幕。我当前的代码完全适用于该部分。当屏幕宽度发生变化时，我只需要找到一种方法来做同样的事情，那就是＆＃34;关于＆＃34;元素总是填满整个屏幕。我已经尝试每隔几秒检查一次，如果屏幕宽度发生变化，则重新注册元素，但每隔一段时间就会失败一次。有什么方法可以让浏览器滚动到我想要滚动到的元素，然后在检测到屏幕宽度的变化后重新滚动到该元素？

修改 JSFiddle在这里：https://jsfiddle.net/Ghifari160/sy3qgtqe/1/

Answer 1

这个问题很难清楚地回答，因为没有fiddle或pen，我们无法看到结果。但是，考虑到您需要在窗口调整大小时触发事件，您应该查看window.resize全局事件处理程序。

Window.resize是一个与其他事件处理器一样的事件处理程序，因此请使用pageInit（）函数作为处理程序的回调参数。确保仍然在初始时调用您的函数，否则在窗口调整大小之前，您的函数将不会运行。

编辑：为了清晰起见，不妨添加一个例子。

window.onresize = pageInit('about');

无论窗口大小如何变化，jquery滚动到元素然后锁定到该元素

1 个答案: