javascript - Bootbox 模式在打开前滚动到页面顶部

Question

我正在为我的可过滤组合使用 bootstrap 3 和 bootbox.js，我希望能够在模式比浏览器窗口长时向下滚动，但你不应该能够滚动超过模式。

默认情况下，当您单击投资组合元素时，模式会滚动到页面顶部以将其打开。我在我的投资组合链接上使用了 javascript:void(0); 来解决这个问题。但是 .modal 上的 position:absolute 打破了这一点。

但是 position:absolute 和 overflow:auto 允许我以我需要的方式滚动模式(只是不知道如何限制滚动到模式结束)

检查我的 CSS:

.modal {
top: 10%;
left: 50%;
margin-left: -280px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
display: table;
position: absolute;
}

.modal-open {
overflow: auto;
}

You can look at the live version of my site here (滚动到投资组合并单击一个元素)

我已经设置了一个 fiddle 来让大家更容易:http://jsfiddle.net/p4Yw2/

所以我需要:

1. 解决“打开警报前滚动到顶部”的另一种方法除了 javascript:void(0);

之外的问题

2. 一种限制滚动直到模态之后一点的方法 (现在你可以在模态窗口时一直向下滚动页面 打开)

更新:好的，导致这个问题的是我的 smooth-scroll.js 文件，它包含:

$(function(){   

var $window = $(window);
var scrollTime = 0.7;
var scrollDistance = 275;

$window.on("mousewheel DOMMouseScroll", function(event){

    event.preventDefault(); 

    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta*scrollDistance);

    TweenMax.to($window, scrollTime, {
        scrollTo : { y: finalScroll, autoKill:true },
            ease: Power1.easeOut,
            overwrite: 5                            
        });

    });
});

Answer 1

我遇到了同样的问题。 Bootbox 正在将正文的溢出更改为隐藏，使页面变小以致无法滚动。

这个 css 为我解决了这个问题:

body.modal-open {
    overflow: visible;
}