All geek questions in one place

Sharepoint window scrolling does not work

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

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

The scroll event does not fire. I changed the scroll body attribute, body and form overflow properties, tried to associate the scroll event with different objects ( window , body , form ). When the scroll event changes to a click event, it fires. I did not find any reason other than the overflow property of the scroll element.

+6
source share
3 answers

This is an old question, but it may still be useful for others, I wanted to implement the scroll function to the top in one of my projects with sharepoint.

After breaking my head for about a few hours. I got it with the code below.

Actually $(window).scroll() does not start at a common point, I use the main identifier there, which ('#s4-workspace') , to make 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 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; }
+18
source

It seems to me right now that the # aspnetForm form should not have a working scroll bar, right?

overflow: scroll only makes sense with height or max-height . (Also, I would replace overflow: scroll with overflow: auto so that you only display the scrollbar, which you really need to show, which is most likely a vertical scrollbar.

If you want to track scrolling throughout the document, change the code to

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

check the following code and see if it helps you. I added height to the shape.

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

Source: https://habr.com/ru/post/953573/

More articles:


All Articles