Sharepoint 窗口滚动未触发答案

【问题标题】：Sharepoint window scroll not firingSharepoint 窗口滚动未触发
【发布时间】：2013-09-14 08:24:01
【问题描述】：

我的 SharePoint 页面生成了这个 HTML（已剪辑）：

<body scroll="yes" onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="v4master" style="overflow: scroll" spellcheck="false">
    <form name="aspnetForm" method="post" action="/Lists/List/EditNewForm.aspx?ID=2&amp;Source=https%3A%2F%2Fsp2010-test%2Eatwss%2Ecom%2FLists%2FList%2FAllItems%2Easpx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm" style="overflow: scroll">

// some html here

<div id="competenceTotalSum" style="position: absolute; left: 500px; top: 400px; width: 100px; height: 50px; background-color:gray" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){       
        $("form#aspnetForm").bind("scroll", function(e){
            alert("scroll");
            $("#competenceTotalSum").css("top", $(this).scrollTop() + 400);
        });
    });
</script>

// some html here

    </form>
</body>

事件scroll 未触发。我更改了body 的scroll 属性，body 和form 的溢出属性，尝试将scroll 事件绑定到不同的对象（window、body、form）。当将 scroll 事件更改为 click 事件时 - 它会触发。除了滚动元素的overflow 属性，我没有找到任何原因。

【问题讨论】：

bind() 已被弃用，取而代之的是“on” - 请参阅此处：api.jquery.com/on
@Sebastian，谢谢，但它没有解决问题。使用 on() 它也不起作用。
抱歉给您带来了困惑——上面的评论只是对您的代码的一般建议。有关实际答案，请参阅下面的答案。 ;)
@Sebastian，这两个答案都没有帮助我。出于我的目的，我使用了 $(window).resize 事件和块的固定位置。

标签： javascript jquery html sharepoint scroll

【解决方案1】：

在我看来，form#aspnetForm 甚至不应该有一个工作滚动条，对吧？

overflow: scroll 仅与height 或max-height 一起使用才有意义。（此外，我会将overflow: scroll 替换为overflow: auto，这样您就只显示您实际需要显示的滚动条，这很可能是垂直滚动条。

如果您想跟踪整个文档的滚动，请将您的代码更改为

$("body").on("scroll", function(e){
    alert("scroll");
    $("#competenceTotalSum").css("top", $(this).scrollTop() + 400);
});

【讨论】：

【解决方案2】：

检查以下代码，看看它是否可以帮助您。我为表格添加了高度。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body scroll="yes" onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();"  style="overflow: scroll"  class="v4master" spellcheck="false">
    <form name="aspnetForm" method="post"  style="height:100px;overflow: scroll"  action="/Lists/List/EditNewForm.aspx?ID=2&amp;Source=https%3A%2F%2Fsp2010-test%2Eatwss%2Ecom%2FLists%2FList%2FAllItems%2Easpx" 
    onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm"  >

// some html here<br>
// some html here<br>
// some html here<br>
// some html here<br>
// some html here<br>
// some html here<br>
// some html here<br>
// some html here<br><br>
// some html here<br>
// some html here<br>
// some html here<br>
// some html here<br>
// some html here<br>
// some html here<br>
// some html here<br>
// some html here<br>

<div id="competenceTotalSum" style="position: absolute; left: 500px; top: 400px; width: 100px; height: 50px; background-color:gray" >asdsa</div>

<script type="text/javascript">
    $(function(){       
        $("form#aspnetForm").bind("scroll", function(e){
            alert("scroll");
            $("#competenceTotalSum").css("top", $(this).scrollTop() + 400);
        });
    });
</script>

// some html here

    </form>
</body>

【讨论】：

【解决方案3】：

这是一个老问题，但这可能对其他人有帮助，我想在我的一个共享点项目中实现滚动到顶部功能。

大约几个小时后我的头被打破了。我得到了它与下面的代码一起工作。

实际上 $(window).scroll() 不会在共享点中触发，我使用那里的主 ID 即 ('#s4-workspace') 来让它工作。

$(document).ready(function () {
    var offset = 220;
    var duration = 1000;

  jQuery('#s4-workspace').scroll(function() {

        if (jQuery(this).scrollTop() > offset) {
            jQuery('.arrowToTop').fadeIn(duration);
        } else {
            jQuery('.arrowToTop').fadeOut(duration);
        }
    });

    jQuery('.arrowToTop a').click(function(event) {
        event.preventDefault();
       jQuery('#s4-workspace').animate({scrollTop: 0}, duration);
        return false;
    }) });

下面我用过CSS样式

.arrowToTop {
   display: none;
   height: 100%;
   position: fixed;
   right: 20px;    
   z-index: 9999;
   bottom: 0;
   width: 70px;
   height:70px;
} 

.arrowToTop a{     
    width: 70px;
    height:70px; 
    display: block;
     background: url(../images/arrow.png) no-repeat left 0;
    }

【讨论】：

哇，终于有一个可行的版本了。非常感谢你：D