Question

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

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

你可以通过将你的焦点设置到第一页上的一个输入框并选择标签直到它转到第二页来重新设置我设置的小提琴中的这个错误。

我已设置demo here。

重要的代码如下：

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;
}

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

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

P.S。 html的设置是这样的，所以如果javascript被禁用，它仍然会在一个页面上显示所有内容并且仍能正常运行。

Answer 1

我使用以下格式修改了第一个标签的修补程序：http://jsfiddle.net/E7u9X/1/ 。基本上，你可以做的是在最后一个变得模糊之后关注选项卡中的第一个“tabbable”元素，如下所示：

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

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

Answer 2

带溢出的元素：隐藏仍然有滚动，只有滚动条。这有时很有用，而且对其他人很烦。这就是为什么你的位置为零，但你的元素视图已经改变。更改“页面”时将scrollLeft设置为零，应该可以解决问题。

Javascript：防止元素中的内部元素“滚动”

2 个答案: