jquery - 如果元素不适合屏幕，则添加滚动条

Question

我有这样的：

        <li class="1"><a href="#">Link</a>
            <ul>
                <li class="item1"><a href="#">1</a></li>
                <li class="item2"><a href="#">2</a></li>
                <li class="item3"><a href="#">3</a></li>
            </ul>
        </li>

当我按下链接时，那些 ul 项目会向下滑动，但如果它们太多，它们会从屏幕上滑出。如果存在许多 ul 项目并且它们开始向下滑动，我需要这样做，它会在屏幕末尾停止，并且会为这些 ul 链接出现一个滚动条。定义高度不是我想要的。我希望这是可以理解的：）谢谢。

Answer 1

我认为您所要做的就是在最外面的 li 上设置一个最大高度并溢出：滚动它

max-height: 50px;
overflow: scroll;

像这样http://jsfiddle.net/yC32A/

似乎溢出： auto 也可以

机智溢出：自动http://jsfiddle.net/yC32A/1/

Answer 2

为了限制li和防止它超出页面的“结束”，我相信你需要使用一些 jQuery/JavaScript。这是一个应该做你期望的片段：

var li = $(".item2");
var ul = $(".menu");
var bottom = ul.offset().top + ul.height();
var lim = $("body").height() - bottom + li.height();
li.css({"max-height":lim, "overflow-y":"auto"});

还要确保你的 CSS 中有这个：

body, html {
    height: 99%;
}

希望有帮助！