We Keep Coding

Jquery scroll with scrollTop Position is really slow to scroll

I have infinity scroll and each time the top scroll reach to certain part of the div, it loads a new content until its over. But each time it loads, it get very slow. It happens when I put some code inside of .each function, and that my scroll becomes really slow, which is annoying. I don't know how to fix it
function scrollAnimationFrame(ticking, windowHeight, tabSelected){
if (!ticking) {
window.requestAnimationFrame(function() {
scrollEvent(tabSelected, windowHeight);
ticking = false;
});
}
ticking = true;
}
function scrollEvent(tabSelected, windowHeight) {
var activeTab = document.getElementsByName(tabSelected)[0]
var divResults = activeTab.getElementsByClassName('div-content');
var scrollY = window.scrollY || document.documentElement.scrollTop;
var pos = $(window).scrollTop();
var scrollY = window.scrollY || document.documentElement.scrollTop;
$(divResults).each(function(i, el){
var posOutsideDiv = $(el).offset().top + $(el).outerHeight();
var inside = (scrollY >= $(el).offset().top && scrollY <= posOutsideDiv - 150)
if(inside){
toggleThead(el, "visible");
} else if(scrollY >= $(el).offset().top && scrollY <= posOutsideDiv + $(document).height()){
toggleThead(el, "hidden");
} else {
toggleThead(el, "visible");
}
});
}

Okay, I thought it was javascript that the scroll is getting slower each time appending a new content. So I checked at AngularJs and I was reusing the directive template. So basically create two directives for each template and voilá(Hated doing this). No more slow scroll.

Pure Javascript, How to detect if scrollTop will scroll to the bottom of the page?

I have a function which basically runs when an arrow with the class 'downArrow' is click. The function will find the parent of that arrow then find the next sibling with a class of 'scrollPoint' and then scroll to that area. Everything I just described works fine for me the issue I am having is if the bottom of the document hits the bottom of my viewport before the top of the element I am scrolling to hits the top of the viewport it just glitches out and scrolls back to the very top of the document. So I think What I need to do is detect if this scenario is going to happen and then set a max scroll value so the scroll functions doesnt try to scroll passed the bottom of the document.
How would I detect if the bottom of the document will be visible on the viewport and prevent from scrolling that far?
I will provide my code below in hopes that it will help, if you have any questions or need more clarification of what I am asking for just let me know. Thanks
This is my component although for what i am asking only the scrollTo function is really relevant
exports.init = init;
function init (options){
var downArrows = document.querySelectorAll(options.selector);
downArrows.forEach(triggerScrollHandler);
}
function scrollTo(element, to, duration) {
if (duration < 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
}, 10);
}
function scrollHandler (e) {
e.preventDefault();
var el = this,
scrollPoint = findSibling(el),
offsetVal = scrollPoint.getBoundingClientRect(),
windowOffset = window.pageYOffset;
offsetVal = offsetVal.top + windowOffset - 1;
scrollTo(document.body, offsetVal, 600);
}
function findParent(el) {
while (el && el.parentNode) {
el = el.parentNode;
if (el.tagName) {
return el;
}
}
return null;
}
function findSibling (el) {
var parent = findParent(el),
siblings = document.querySelectorAll('.scrollPoint'),
scrollTo;
siblings.forEach(function (currentSib, i) {
if(scrollTo == 'found'){
scrollTo = currentSib;
}
if(currentSib == parent){
scrollTo = 'found'
}
});
return scrollTo;
}
function triggerScrollHandler (el) {
el.addEventListener('click', scrollHandler);
}
And this is where I call in my app.js
var scrollHandler = require('./components/scrollHandler.js');
(function(){
scrollHandler.init({
selector: '.downArrow'
});
}())

Put this in your scroll listener:
if (document.body.scrollHeight <= document.body.scrollTop + document.body.clientHeight ){
console.log('scrolled to bottom');
}
Simple, pure JS solution :)

Adapt scrollTop to work with different resolutions

This is what I use to make 2 divs "unwrap" while scrolling:
CSS
.entry {
height: 40px;
}
.entry.expanded {
height:600px;
}
JavaScript
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var x = $(window).scrollTop();
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
});
It works perfectly fine on my 1920x1080p screen but it doesn't on a friend's 1920x1200px because there aren't 820px to scroll..
How can I solve this to work with every resolution? I tried with this, but unfortunately nothing happens:
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var availableScroll = $(document).height() - $window.height();
var x = $(window).scrollTop();
if (x > 820 || x == availableScroll) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525 || x == availableScroll) {
$($('.entry').get(2)).addClass('expanded');
}
});
Is there a fancy method, that maybe calculates the pixels from the bottom or some method relative to the vertical res?
Here's the webpage with the code live (you can see the 2 divs unwrapping when scrolling).

In general, avoid the == for scrolling because if the scroll is off by even .0001 it will resolve as false. Also replace $window with $(window).
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var availableScroll = $(document).height() - $(window).height();
var x = $(window).scrollTop();
if (x > 820 || Math.abs(x - availableScroll) < 10) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525 || Math.abs(x - availableScroll) < 10) {
$($('.entry').get(2)).addClass('expanded');
}
});
Also, if you want to execute code when the page first loads, use the $(document).ready(handler) pattern.

Your former functions seems to working fine. I am testing it as MacBook Pro. However, at sometime it seems it is not fired at JQuery. What you can do is you can wait for few milliseconds to check if the scroll is finished. If scroll is finished then you can simply check the value of scroll.
Option 1:
jQuery debounce is a nice one for problems like this. jsFidlle
So your modified code will be (you need to use debounce)
$(window).scroll($.debounce( 250, true, function(){
console.log("Still scrolling");
}));
$(window).scroll($.debounce( 250, function(){
var x = $(window).scrollTop();
console.log("Scrolling finished");
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
}));
Option 2:
There may be a chance you don't like use JQuery Debounce then you can native approach with timer function. See the code below and you can adjust the timer duration as per your needs.
It is simply waiting for scroll event to be finished and wait for certain milliseconds before it scroll event recalled. If scroll refires then it simply clear the timer and start waiting again. If timer is finished then it executes the method you have stated.
$(window).scroll(function() {
var timerDuration = 250; // In milliseconds
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
// do something
var x = $(window).scrollTop();
console.log("Scrolling finished");
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
}, timerDuration));
});

AngularJS 'scrollTop' equivalent?

I'm looking to implement something similar to this in an AngularJS directive:
https://github.com/geniuscarrier/scrollToTop/blob/master/jquery.scrollToTop.js
It's fairly straightforward, when you are not at the top of the page it will fade in a button to scroll to the top:
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$this.fadeIn();
} else {
$this.fadeOut();
}
});
However I'm having a hard time finding how to get the current scroll location in Angular. I'd rather not have to use jQuery just for this single thing.

$window.pageYOffset
This is property from service $window

I don't believe there's anything in Angular to get the scroll position. Just use plain vanilla JS.
You can retrieve the scrollTop property on any element.
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop
document.body.scrollTop
Fiddle for you: http://jsfiddle.net/cdwgsbq5/

Inject the $window into your controller and you can get the scroll position on scroll
var windowEl = angular.element($window);
var handler = function() {
console.log(windowEl.scrollTop())
}
windowEl.on('scroll', handler);
Fiddle
Adaptation from another stackoverflow answer

You can use like as polyfill
here a link
function offset(elm) {
try {return elm.offset();} catch(e) {}
var rawDom = elm[0];
var _x = 0;
var _y = 0;
var body = document.documentElement || document.body;
var scrollX = window.pageXOffset || body.scrollLeft;
var scrollY = window.pageYOffset || body.scrollTop;
_x = rawDom.getBoundingClientRect().left + scrollX;
_y = rawDom.getBoundingClientRect().top + scrollY;
return { left: _x, top: _y };
}

You can use
angular.element(document).bind('scroll', function() {
if (window.scrollTop() > 100) {
$this.fadeIn();
} else {
$this.fadeOut();
}
});

Executing $(window).load() and $(window).resize() in Drupal 7

I'm trying to resize a couple divs on page load and window resize in drupal 7.
theme.info
name = Theme
description = The Theme
core = 7.x
stylesheets[all][] = css/style.css
scripts[] = js/scripts.js
(the rest)
scripts.js
$(window).load(function() {
getViewport();
});
$(window).resize(function() {
getViewport();
});
function getViewport() {
alert('function hit');
var viewportwidth;
var viewportheight;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
viewportheight = window.innerHeight || document.documentElement.clientHeight || document.body.clientWidth;
}
document.getElementById("content").style.height = (window.innerHeight - 150) + 'px';
document.getElementById('sidebar-first').style.height = (window.innerHeight - 50) + 'px';
}
But neither load, resize, or the function or getting hit. I'm sure it's my ignorance of utilizing this in drupal, but I can't seem to find the answer.
I've even tried including my own jquery library in the info file, but to no avail.
Thanks

No jQuery needed for this code to work, just create some event listeners and kill the $(window) method chains.
window.addEventListener('load', function() { getViewport() });
window.addEventListener('resize', function() { getViewport() });
Note:
You'll want to normalize addEventListener() if you need to target less than IE9. Something like:
if ( window.addEventListener ) {
// Modern browsers
window.addEventListener('load', function() { getViewport() });
window.addEventListener('resize', function() { getViewport() });
} else
// Browsers that need to die
window.attachEvent('onLoad', function() { getViewport() });
window.attachEvent('onResize', function() { getViewport() });
}