本文介绍SharePoint 2013(其实也适用于2010,支持JavaScript OM) 中使用嵌入JavaScript方式实现一个垂直滚动列表：

当鼠标进入Item时停止滚动，当鼠标点击对应的Item时，显示对应的Item内容：

实现的大概思路是使用一段较短的JavaScript代码嵌入SharePoint页面，这个JavaScrip片段（可设置相关参数，如列表名，过滤条件等）调用另一个较大的JavaScript文件VerticalScrollingWebPart.js(存储到SharePoint 的SiteAssets/JavaScript中), VerticalScrollingWebPart.js 文件负责使用JavaScript OM 查询后台列表，并根据参数画出一个滚动列表：

嵌入的JavaScript 代码：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/SiteAssets/Javascript/VerticalScrollingWebPart.js"></script>
<script type="text/javascript">
init_fillScrollableDiv({'web':'',
    'listBaseUrl': 'http://MossHost/Lists/ReadMarkList/DispForm.aspx',
    'listName': 'ReadMarkList',	
	'viewFields':['Title','Body'],    
    'Filter':'<Where> <Or>  <IsNull> <FieldRef Name=\"Expires\" />  </IsNull>  <Geq> <FieldRef Name=\"Expires\"></FieldRef> <Value Type=\"DateTime\"> <Today></Today> </Value> </Geq> </Or> </Where>',
	'viewFieldsStyle':['font-weight:bold','padding:0 0 0 5'],	
	'divID':'myScrollableDiv',
	'divHeight':'250px',
	'divWidth':'500px',	
	'speed':4,
	'linkBack':true});    
</script>

主要参数说明：

1. web，如果取子站点的列表需要填

2. listBaseUrl, 显示list item的地址

3. listName,要读取的list 名称

4.viewFields, 要显示的字段

5.Filter 过滤条件(CAML结构的 Where 子句)

VerticalScrollingWebPart.js 代码：

/*
 A vertical scrolling web part for SharePoint 2013
*/
function init_fillScrollableDiv(obj) {
    // Build the div
    var myDivBuffer = [];
    myDivBuffer.push("<div style='vertical-align:top;position:relative;overflow:hidden;cursor:default;height:" + obj.divHeight + ";width:" + obj.divWidth + "'>");
    myDivBuffer.push("<div id='" + obj.divID + "' style='position:relative'></div>");
    myDivBuffer.push("</div>");
    myDivContainer = myDivBuffer.join('');
    document.write(myDivContainer);
    $(document).ready(function () {
        // fillScrollableDiv(obj)
        ExecuteOrDelayUntilScriptLoaded(function () { queryItemsByViewName(obj); }, "sp.js");
        //queryItemsByViewName(obj);
    });
}

function fillScrollableDiv(info, items) {    
    info.animBegin = 0;
    info.animPart = 0;
    if (items.length == -1) alert("An error occured - check the parameters \"listBaseUrl\", \"web\"......");
    var finalBuffer = [];
    var path = info.listBaseUrl;
    var res = new Object();
    res.items = items;
    $.each(res.items, function (i, item) {
        var partBuffer = [];       
        $.each(info.viewFields, function (idx, fin) {
            var style = '';
            var thisVal = (item[fin] == null) ? '' : item[fin];
            if (thisVal.indexOf(';#') > -1) {
                thisVal = thisVal.substring(thisVal.indexOf(';#') + 2);
            }
            if (info.viewFieldsStyle[idx] != undefined) {
                style = " style='" + info.viewFieldsStyle[idx] + "'";
            }
            partBuffer.push("<tr><td" + style + ">" + thisVal + "</td></tr>");
        });
        finalBuffer.push("<hr style='height:1px;color:black' />");
        if (info.linkBack) {
            finalBuffer.push("<table title='Go to item' style='cursor:pointer' &quo