SP Widget window.onscroll

xiaix · ‎09-06-2017

Can't seem to get window.onscroll to work in my Service Portal widget.

HTML:

<div style="display:none;" ng-init="setScrollListener()"></div>

Client:

$scope.setScrollListener = function() { window.onscroll = function() { console.info("scrolled"); }; };

Any ideas?

xiaix · ‎09-06-2017

*UPDATED CODE* - June 28th, 2019

Figured it out. Since it's a widget doing the work on a SP Page, "window" won't work. <section> was the key.

Here's the working code:

HTML:

<div ng-init="setScrollListener()" id="{{version}}" class="scroll-top-wrapper" ng-click="topFunction()">
  <span class="scroll-top-inner">
    <i class="fa fa-2x fa-arrow-circle-up"></i>
  </span>
</div>

CLIENT:

function($scope, $timeout) {
	$scope.version = "scrollToTopBtn3";
	$scope.scrollFunction = function(e)	{
		if (e.scrollTop > 20 || document.documentElement.scrollTop > 20) {
			try{
				document.getElementById($scope.version).classList.add('show');
				$scope.$emit("ta_scrolling",e);
			}catch(e1){console.warn("595:" + e1.message);}
		} else {
			try{
				document.getElementById($scope.version).classList.remove('show');
			}catch(e2){console.warn("600:" + e2.message);}
		}
	};
	$scope.setScrollListener = function() {
		var section = document.getElementsByTagName('section')[0];
		if (section) {
			section.onscroll = function() {
				$scope.scrollFunction(section);
			};
		} else {console.warn("No section found from $scope.setScrollListener function");}
	};
	$scope.topFunction = function() {
		var section = document.getElementsByTagName('section')[0];
		if (section) {
			section.scrollTop = 0;
		} else {console.warn("No section found from $scope.topFunction function");}
	};
}

CSS:

.scroll-top-wrapper {
  opacity:0;
  width:50px;
  right:30px;
  height:50px;
  bottom:30px;
  color:#eee;
  padding-top:2px;
  z-index:99999999;
  line-height:48px;
  visibility:hidden;
  background-color:#777;
  transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -webkit-transition:all .5s ease-in-out;
  border-radius:5px
}
.scroll-top-wrapper:hover {
  background-color:#888
}
.scroll-top-wrapper.show {
  visibility:visible;
  cursor:pointer;
  opacity:1
}
.scroll-top-wrapper i.fa {
  line-height:inherit
}
.cc_container,
.scroll-top-wrapper {
  position:fixed;
  overflow:hidden;
  text-align:center
}

View solution in original post

Shane J · ‎06-26-2019

I got it!

HTML initial DIV needs to have:

And add this to the Client Script (likely requires you add $scope to the top function as well):

$scope.setScrollListener = function()
       {
               var section = document.getElementsByTagName('section')[0];
               if (section)
               {
                      section.onscroll = function() {
                               $scope.scrollFunction(section);
                     };
               }
       };
       $scope.scrollFunction = function(e)
       {
         
				    if(e.offsetHeight + e.scrollTop == e.scrollHeight)
            {
                //alert("End");
							document.getElementById('bleh').style.display='none';
            }
				 
				 if(e.offsetHeight + e.scrollTop != e.scrollHeight)
            {
                //alert("End");
							document.getElementById('bleh').style.display='initial';
            }


}

xiaix · ‎06-28-2019

Glad you got it working, Shane.

I took the liberty to update my posted code for this. It functions and looks much better than what I had.

Shashank23 · ‎01-28-2020

Hello,

can we use Sp widget window.onscroll functionality without using DOM functionality?