Javascript 引导3.1.0：粘贴太长

我使用的是Bootstrap3.1.0。当“粘贴”对于视口来说太长时，它会被切断，从不显示底部项目

是否有可能让引导的词缀以用户仍然可以从上到下滚动完整词缀的方式运行

有问题的例子：

<div class="container">
    <div class="row">

        <div class="col-md-3">
            <div class="list-group" id="sidebar">
                <a href="#" class="list-group-item">Long</a>
                <a href="#" class="list-group-item">list</a>
                <a href="#" class="list-group-item">with</a>
                <a href="#" class="list-group-item">many</a>
                <a href="#" class="list-group-item">entries</a>
                ...
                <a href="#" class="list-group-item">29. Last</a>
            </div>
        </div>

        <div class="col-md-9">
          ... regular content    
        </div>

    </div>
</div>

...
... 常规内容

---

.

我希望它能帮助您：

只需添加一个

overflow-y

Jsfiddle:

添加了Css:

#sidebar{
 max-height: 100%;
 overflow-y: auto;   
}

$('#sidebar').affix({
    offset: {
        top:100,
        bottom:0
    }
});


$('#sidebar').on('affixed.bs.affix', function(){
    $(this).removeAttr('style');
});

评论后更新：

#sidebar{
 max-height: 100%;
 overflow-y: auto;   
}

$('#sidebar').affix({
    offset: {
        top:100,
        bottom:0
    }
});


$('#sidebar').on('affixed.bs.affix', function(){
    $(this).removeAttr('style');
});

小提琴：

JS:

#sidebar{
 max-height: 100%;
 overflow-y: auto;   
}

$('#sidebar').affix({
    offset: {
        top:100,
        bottom:0
    }
});


$('#sidebar').on('affixed.bs.affix', function(){
    $(this).removeAttr('style');
});

---

我也有同样的问题。我花了几个小时，最后写了以下解决方案：

$('#sidebar').on('affix.bs.affix', function (e) {
    var $this = $(this),
        affix = $this.data('bs.affix'),
        offset = affix.options.offset,
        offsetBottom = offset.bottom;

    if (typeof offset != 'object') {
        offsetBottom = offset;
    }

    if (typeof offsetBottom == 'function') {
        offsetBottom = offset.bottom($this);
    }

    if ($this.outerHeight() + $this.offset().top + offsetBottom === Math.max($(document).height(), $(document.body).height())) {
        e.preventDefault();
    }
});

您可以在处查看代码并在处播放演示

---

希望这些信息会有帮助。

在我的例子中，我在左侧有一个很长的侧边栏，我希望可以随时滚动。 对我来说，该解决方案比上述解决方案更简单：

$('[data-spy="affix"]').on('affix.bs.affix', function (e) {
    e.preventDefault();
    return;
});

---

我不知道您的具体用例，但是否完全有必要在一个比视口大的词缀中包含这么多的项？在您的示例中，如果要加载具有较小宽度视口的页面，则必须滚动浏览那么多元素，因为侧边栏加载在页面顶部。我觉得如果你有可扩展的部分，并尽量减少侧边栏的大小，你会有更好的结果和用户体验。谢谢，这已经为我指明了一个好的方向。虽然我注意到，当内容部分比粘贴部分短时，您的解决方案可能会遇到可用性问题。下面是一个JSFIDLE示例，说明了这个问题（至少在Chrome33和IE11中是有问题的）：。向下滚动时，窗口会猛然旋转并跳回上半部分，而不会露出下半部分。