CODEWITHSUNDEEP
javascriptjqueryhtmlsharepointscroll
Electrionics
Electrionics

Reputation: 6772

Sharepoint window scroll not firing

I have this HTML generated by my SharePoint page (clipped):

<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>

Event scroll not firing. I changed scroll attribute of body, overflow properties of body and form, tried to bind scroll event to different objects (window, body, form). When change scroll event to click event - it fires. I didn't find any reasons of it except overflow property of scrolled element.

Upvotes: 7

Views: 9690

Answers (3)

Anjum....
Anjum....

Reputation: 4204

It's kind of old Question but still this might be helpful for other, I wanted to implement scroll to top feature in one of my share point project.

After breaking my head around few hours. I got it working with below code.

actually $(window).scroll() wont fire in share point, I use there master id which is ('#s4-workspace') to get it work.

$(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;
    }) });

I have used below CSS style 

.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;
    }

Upvotes: 24

Sam4Code
Sam4Code

Reputation: 551

check following code and see if it can help you. I have added height to form.

<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>

Upvotes: 0

Sebastian
Sebastian

Reputation: 1429

As it looks to me right now, form#aspnetForm shouldn't even have a working scroll bar, right?

overflow: scroll only makes sense together with height or max-height. (Additionally, I'd replace overflow: scroll with overflow: auto so you only show the scroll bar you actually need to show, which most likely is the vertical scroll bar.

If you want to track scrolling on the whole document, change your code to

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

Upvotes: 0

Related Questions