我们如何在不设置宽度和高度的情况下设置列表视图的滚动条？答案

【问题标题】：How can we set the scroll bar for list view with out setting the width and height?我们如何在不设置宽度和高度的情况下设置列表视图的滚动条？
【发布时间】：2014-06-07 06:33:01
【问题描述】：

如何在不设置宽度和高度的情况下设置列表视图的滚动？如果我设置了宽度和高度，它并不适合所有屏幕分辨率。所以我不想设置宽度和高度。如果列表视图超过了四个元素，它应该设置滚动。怎么可能？有什么建议吗？

  <ul data-role="listview" id="locationList" data-dismissible="false" name="locationList" data-inset="true">
        <li><a>Element 1</a></li>
        <li><a>Element 2</a></li>
        <li><a>Element 3</a></li>
        <li><a>Element 4</a></li>
        <li><a>Element 5</a></li>
        <li><a>Element 6</a></li>                     
    </ul>

【问题讨论】：

标签： jquery html css jquery-ui jquery-mobile

【解决方案1】：

为了得到你的结果，还有一个纯 jQuery 代码解决方案，不需要向你的 ul 元素添加任何类
正如你在这个FIDDLE 中看到的，我只设置了 ul 标记的高度，当元素超过 7 个时，自动标记变为溢出滚动
您还有两个按钮用于增加或减少 li 标记长度并查看运行中的脚本
当您在 jQuery 的 css 方法中将函数作为 css 属性的值传递时（参见 checklen 函数），您可以决定该值该属性根据某些参数。本例中的li标签数

 <script type="text/javascript">
$(document).ready(function(){
    function checkLen(len){
        $('#locationList').css('overflow-y',function(){
            if(len>7){return 'scroll'
                }else{return 'auto'}
            });
      };
    $('#a').click(function(){
        var len=$('ul li').length;
        $('<li><a>Element '+(len+1)+'</a></li>').appendTo('ul');
        checkLen(len);
        });
    $('#b').click(function(){
        $('li:last').remove();
        var len=$('ul li').length;
        checkLen(len);
        });

});
</script>

【讨论】：

【解决方案2】：

使用 %(percentage) 中的宽度代替 fix PX(pixel)，它会起作用。

【讨论】：

如何在下面的语句中使用 %，style="width: 285px; height: 150px; overflow: auto"
如果我设置了不适合所有屏幕分辨率的宽度和高度。所以我不想设置宽度和高度。因此，要使其适合移动分辨率，请使用 %。

【解决方案3】：

要使滚动生效，您必须提供高度和宽度。但是，您可以使用 jquery 来检查列表项，如果其中存在超过 4 个项目，则可以对其应用高度和宽度。

另外，要让滚动出现，您必须使用溢出属性。因此，当您列出的项目超过 4 个时，您可以应用它。您可以这样创建一个类：

.showScroll {
    width:200px;
    height: 150px;
    overflow:scroll;
    background-color:gray;
}

并像这样使用 jquery：

var countOfListItems = $("#locationList li").size();
if (countOfListItems > 4) {
    $("#locationList").toggleClass('showScroll');
}

在这里查看->http://jsfiddle.net/TVK43/1/。这应该会给你一个更好的主意。

您也可以尝试 Sharanpreet 的答案，即使用百分比来表示宽度。

希望对你有帮助！！！

【讨论】：