Detect when I'm doing scroll on an element

Question

Detect when I'm doing scroll on an element

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

//Directive active view.
app.directive("activeView", function ($window, $rootScope) {
    return function(scope, element, attrs) {
        angular.element($window).bind("activeView", function() {
            //variables condiciales
            var y1, y2;
            // Variable that gives the scroll position
            var scroll = ($(window).scrollTop() || $("body").scrollTop());
            //
            y1 = $(element).posY();
            y2 = $(element).height() + y1;
            // Conditions for logo changes
            if( scroll >= y1 && scroll < y2 ) {
                $rootScope.activeView = attrs.id;
            }
            console.log(element);
            console.log($root.activeView);
            console.log(id);
            console.log(attrs);
            // Don't Remove this element
            $rootScope.$apply();
        });
    };
});'

'<img class="logo" src="img/logo.svg" ng-if="$root.activeView == '#landing' || $root.activeView == 'customers' || $root.activeView == 'page2' || $root.activeView == 'page4' || $root.activeView == 'page12' || $root.activeView == 'page13' || $root.activeView == 'page14' || $root.activeView == 'page20'">
  <img class="logo2" src="img/logo_b.svg" ng-if="$root.activeView == 'about' || $root.activeView == 'services' || $root.activeView == 'contact' || $root.activeView == 'page3'">

html5 angularjs angular-directivas

asked by Carlos Vargas 10.02.2017 в 17:53

source

2 answers

2

Another alternative to the answer of @Guz could use the event the event scroll and .target to know which scroll is being used.

let hijos = document.querySelectorAll('.scrollable');
for (hijo of hijos) {
   hijo.addEventListener('scroll', function (e) {
  console.log('scrolling in ', e.target.id);
});
}

.scrollable {
  background-color: black;
  height: 300px;
  margin: 20px auto;
  overflow: auto;
  padding: .5rem;
  width: 300px;
}

.box {
  background-color: orange;
  height: 1000px;
  margin: 0 auto;
  width: 70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollable" id="content1">
  <div class="box"></div>
</div>
<div class="scrollable" id="content2">
  <div class="box"></div>
</div>
<div class="scrollable" id="content3">
  <div class="box"></div>
</div>

answered by 10.02.2017 в 20:30

Show result of Ajax in the modal itself with Bootstrap error: type 'FirstClass' does not provide a call operator

score 3 · Accepted Answer

Through the event scroll .

let scrollable = document.querySelector('.scrollable');

scrollable.addEventListener('scroll', function (e) {
  console.log('scrolling');
});

body {
  overflow: hidden;
}

.scrollable {
  background-color: coral;
  height: 300px;
  margin: 20px auto;
  overflow: auto;
  padding: .5rem;
  width: 300px;
}

.box {
  background-color: turquoise;
  height: 1000px;
  margin: 0 auto;
  width: 70px;
}

<div class="scrollable">
  <div class="box"></div>
</div>

Update

Regarding your comment:

I need to know when I pass from one to the other , that is, detect when I pass in several elements

You can implement the Observer pattern to know when to scrolls each element. To keep things simple, I will use for this example the micro-library MicroEvent to implement this pattern. You can do it manually with only conditional, but I like the reactive model more. It is up to you to decide

let scrollables = document.querySelectorAll('.scrollable');
let currentContent = null;
MicroEvent.mixin(Emitter);
let emitter = new Emitter();

/* Escucha por el evento 'scrollChange' */
emitter.bind('scrollChange', function(id) {
	console.log('Se ha cambiado al ememento #${id}');
});

[].forEach.call(scrollables, function (scrollable) {
	scrollable.addEventListener('scroll', function (e) {
    let id = scrollable.id
    if (!currentContent || currentContent !== id) {
    	currentContent = id;
    	emitter.emit(id);
    }
  });
});

/* Es ecesario crear una función para que funcione MicroEvent */
function Emitter() { };
/* Método encargado de emitir el evento 'scrollChange' */
Emitter.prototype.emit = function (id) {
  this.trigger('scrollChange', id);
}

.scrollable {
  background-color: coral;
  height: 300px;
  margin: 20px auto;
  overflow: auto;
  padding: .5rem;
  width: 300px;
}

.box {
  background-color: turquoise;
  height: 1000px;
  margin: 0 auto;
  width: 70px;
}

<script src="https://cdn.rawgit.com/jeromeetienne/microevent.js/master/microevent.js"></script>

<div class="scrollable" id="content1">
  <div class="box"></div>
</div>
<div class="scrollable" id="content2">
  <div class="box"></div>
</div>
<div class="scrollable" id="content3">
  <div class="box"></div>
</div>