0

我有一个脚本，其 div 的宽度大于其父级，父级设置为overflow: hidden;. 我有 javascript 设置left大 div 的位置以创建“页面”。您可以单击链接在页面之间移动。

所有这些都很好，但问题是如果您从一个“页面”元素切换到另一个，它会完全打乱所有左侧定位以在页面之间移动。

您可以在我设置的小提琴中重新创建此错误，方法是将您的焦点设置为第一页上的输入框之一，然后使用制表符直到它带您进入第二页。

我在这里设置了一个演示。

重要的代码如下：

HTML：

<div class="form">
    <div class="pagesContainer">
        <div class="page" class="active">
            <h2>Page One</h2>
            [... Page 1 Content here...]
        </div>

        <div class="page">
            <h2>Page Two</h2>
            [... Page  Content here...]
        </div>
</div>

CSS：

.form {
    width: 400px;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    float: left;
}

    .pagesContainer {
        position: relative; /*Width set to 10,000 px in js
    }

    .form .page {
        width: 400px;
        float: left;
    }

JS：

slidePage: function(page, direction, currentPage) {
    if (direction == 'next') {
        var animationDirection = '-=';
        if (page.index() >= this.numPages) {
            return false;
        }
    }
    else if (direction == 'previous') {
        var animationDirection = '+=';
        if (page.index() < 0) {
            return false;
        }
    }

    //Get page height
    var height = page.height();
    this.heightElement.animate({
        height: height
    }, 600);

    //Clear active page
    this.page.removeClass('active');
    this.page.eq(page.index()).addClass('active');

    //Locate the exact page to skip to
    var slideWidth = page.outerWidth(true) * this.difference(this.currentPage.index(), page.index());

    this.container.animate({
        left: animationDirection + slideWidth
    }, 600);

    this.currentPage = page;
}

主要问题是，当您从第一页上的输入框到第二页上的某个内容时，无论发生什么，它都会带您到那里，但 css 仍然认为您在left: 0px;. 我一直在寻找解决方案，但到目前为止，谷歌向我透露的所有内容都是如何停止滚动条滚动。

任何帮助或建议将不胜感激，谢谢！

PS html 是这样设置的，因此如果禁用了 javascript，它仍然会全部显示在一个页面上并且仍然可以正常运行。

4

2 回答 2

1

我用以下形式更新了您的小提琴，修复了第一个选项卡：http: //jsfiddle.net/E7u9X/1/ 。基本上，您可以做的是在最后一个变得模糊之后专注于选项卡中的第一个“可选项卡”元素，如下所示：

$('.form input').last().blur(function(){
    $('.form input').first().focus();
});

（这只是一个例子，第一个活动元素可以是任何其他元素）

于 2012-10-31T14:51:20.600 回答
1

Elements with overflow: hidden still have scrolling, just no scroll bars. This can be useful at times and annoying at others. This is why your position left is at zero, but your view of the element has changed. Set scrollLeft to zero when you change "pages", should do the trick.

于 2012-10-31T15:00:15.010 回答