javascript - 使用有限的列表项滚动 - 没有 jquery

Question

我正在尝试创建一个包含任意数量 > 10 项的列表，但我尝试仅使用 10 个实际列表项元素。我希望它仍然可以滚动，但永远不会呈现超过 10 个列表项，我不确定我是否必须重复使用每个列表项并更改所有 10 个的文本，使其看起来像滚动或类似的东西。

我这样做的原因是我收到的数据很快，我不想向 DOM 添加数千个列表项。

谢谢!

Answer 1

您可以将可滚动的 div (widget-view) 与两个子项一起使用:一个只有 10 个项目的列表 (widget-list) 和一个透明的 div (widget-surface) 在它上面。重要的是保持 widget-surface 的高度等于包含所有项目的假想列表的高度。然后在 widget-view 的 onscroll 事件中，你可以找出哪些项目是可见的，并更新 widget-list。

在下面的例子中，您可以改变widget-view的高度和widget-list的行高来设置中的项目数小部件列表，例如您可以拥有 10 个具有以下值的项目:

.widget-list
{
    line-height: 20px ;
}
.widget-view
{
    height: 200px ; /* A multiple of widget-list's line-height */
}

你应该改变的唯一功能是:

function updateList( list, from, to )

其中list是ul节点，from是第一个可见项索引，to-1是最后一个可见项索引。当列表“滚动”或被修改时调用 updateList。该示例显示了可见项的索引。

每个小部件定义如下:

<div class="widget" id="widget-1">
    <div class="widget-view">
        <div class="widget-surface">
        </div>
        <ul class="widget-list">
        </ul>
    </div>
    <button onclick="addFive('widget-1');">Add 5</button><!--
    --><button onclick="delFive('widget-1');">Del 5</button>
    <p class="widget-label"></p>
</div>

并在window的onload事件中初始化如下:

initializeWidget( "widget-1", 20 ) ; /* 20 initial items */

我在每个 widget 上添加了两个按钮，分别用于添加和删除 5 个项目。

这是工作示例:

addEventListener( "load", onWindowLoad, false ) ;
function updateList( list, from, to )
{
    var i, c = list.childNodes ;
    for( i = 0 ; i < c.length ; ++i )
    {
        if( c[i].tagName === "LI" )
        {
            c[i].innerHTML = from < to ? "Item " + from++ : "" ;
        }
    }
}
function onWindowLoad( )
{
    initializeWidget( "widget-1", 10 ) ;
    initializeWidget( "widget-2", 3 ) ;
    initializeWidget( "widget-3", 5 ) ;
}
function getComputed( element, property )
{
    if( element.currentStyle )
    {
        return element.currentStyle[property] ;
    }
    else
    {
        return window.getComputedStyle(element,null)[property] ;
    }
}
function getComputedPX( element, property )
{
    var b = getComputed( element, property ) ;
    return b ? parseInt( b.replace("px",""), 10 ) : b ;
}
function hasClass( node, cname )
{
    if( !node.className ) return false ;
    var i, l = node.className.split(' ') ;
    for( i = 0 ; i < l.length ; ++i )
    {
        if( l[i] === cname ) return true ;
    }
    return false ;
}
function getFirstChildByClass( parent, cname )
{
    if( !parent ) return null ;
    var i, l = parent.childNodes ;
    for( i = 0 ; i < l.length ; ++i )
    {
        if( this.hasClass( l[i], cname ) ) return l[i] ;
    }
    return null ;
}
function getView( widget )
{
    return getFirstChildByClass( widget, "widget-view" ) ;
}
function getLabel( widget )
{
    return getFirstChildByClass( widget, "widget-label" ) ;
}
function getSurface( widget )
{
    var view = getView( widget ) ;
    return getFirstChildByClass( view, "widget-surface" ) ;
}
function getList( widget )
{
    var view = getView( widget ) ;
    return getFirstChildByClass( view, "widget-list" ) ;
}
function getLineHeight( widget )
{
    var list = getList( widget ) ;
    return getComputedPX( list, "lineHeight" ) ;
}
function getHeight( widget )
{
    var surface = getSurface( widget ) ;
    return getComputedPX( surface, "height" ) ;
}
function getViewHeight( widget )
{
    var view = getView( widget ) ;
    return getComputedPX( view, "height" ) ;
}
function addItems( widget, number )
{
    var lineHeight = getLineHeight( widget ) ;
    var height = getHeight( widget ) ;
    var newHeight = height + lineHeight * number ;
    var surface = getSurface( widget ) ;
    if( newHeight < 0 ) newHeight = 0 ;
    surface.style.height = newHeight + "px" ;
    updateWidgetPosition( widget ) ;
    var label = getLabel( widget ) ;
    label.innerHTML = "<b>Loaded</b>: " + (newHeight/lineHeight) + " items" ;
}
function addFive( id )
{
    var widget = document.getElementById( id ) ;
    addItems( widget, 5 ) ;
}
function delFive( id )
{
    var widget = document.getElementById( id ) ;
    addItems( widget, -5 ) ;
}
function updateWidgetPosition( widget )
{
    var lineHeight = getLineHeight( widget ) ;
    var height = getHeight( widget ) ;
    var view = getView( widget ) ;
    var from = Math.round( view.scrollTop / lineHeight ) ;
    var to = from + height / lineHeight ;
    var list = getList( widget ) ;
    updateList( list, from, to ) ;
}
function onScroll( )
{
    updateWidgetPosition( this.parentNode ) ;
}
function initializeWidget( id, number )
{
    var widget = document.getElementById( id ) ;
    var view = getView( widget ) ;
    view.addEventListener( "scroll", onScroll, false ) ;
    var list = getList( widget ) ;
    var lineHeight = getLineHeight( widget ) ;
    var height = getViewHeight( widget ) ;
    var i, to = height / lineHeight ;
    for( i = 0 ; i < to ; ++i )
    {
        var li = document.createElement('LI');
        list.appendChild(li) ;
    }
    addItems( widget, number ) ;
}

.widget-list
{
    line-height: 20px ;
}
.widget-view
{
    height: 100px ; /* A multiple of widget-list's line-height */
}
.widget
{
    display: inline-block;
    position: relative ;
    box-sizing: border-box ;
    overflow: hidden ;
    width: 30% ;

}
.widget-view
{
    overflow: hidden ;
    overflow-y: scroll ;
    border: 1px solid #888 ;
}
.widget-list
{
    position: absolute ; 
    top: 0 ;
    left: 0 ;
    z-index: -1 ;
    margin: 0 ;
    width: 100% ;
    box-sizing: border-box ;
    list-style-type: none ;
    padding: 0 4px 0 4px ;
}
.widget button
{
    width: 50% ;
    font-size: 14pt ; 
}
body
{
    font-family: sans-serif ; 
    color: #555 ;

}

<div class="widget" id="widget-1">
    <div class="widget-view">
        <div class="widget-surface">
        </div>
        <ul class="widget-list">
        </ul>
    </div>
    <button onclick="addFive('widget-1');">Add 5</button><!--
    --><button onclick="delFive('widget-1');">Del 5</button>
    <p class="widget-label"></p>
</div>
<div class="widget" id="widget-2">
    <div class="widget-view">
        <div class="widget-surface">
        </div>
        <ul class="widget-list">
        </ul>
    </div>
    <button onclick="addFive('widget-2');">Add 5</button><!--
    --><button onclick="delFive('widget-2');">Del 5</button>
    <p class="widget-label"></p>
</div>
<div class="widget" id="widget-3">
    <div class="widget-view">
        <div class="widget-surface">
        </div>
        <ul class="widget-list">
        </ul>
    </div>
    <button onclick="addFive('widget-3');">Add 5</button><!--
    --><button onclick="delFive('widget-3');">Del 5</button>
    <p class="widget-label"></p>
</div>

希望您能根据自己的需要进行调整。