How to detect scrolling in div when position is fixed - javascript

I am trying to detect scrolling in a div which is inside a div with position:fixed;.
This div with position fixed property is being added to DOM by javascript so i am attaching event handler like this
$(document).on('scroll', '.scroll_div', function(){
console.log("scrolled!");
});
But it is not working.

Try to use, everytime AFTER, when You add new .scroll_div element to DOM.
JSFiddle
$('.scroll_div').off('scroll').on('scroll', function(){
console.log("scrolled!");
});

Related

jQuery, js, listener when div lose class?

I have a very unusual problem and I do not know if it is possible to solve it using jQuery.
When someone clicks on the page (on element .tc-lightbox-wrap)
When the any div loses class (.tc-hidden)
Move the screen (center screen) to this div
I must use MutationObserver?
I try using:
$('.cart').bind('.tc-hidden .tc-hidden', function() { });
but this is not working good with addEventListener 'click'.
Probably it is my fault that it does not work.
$(document).ready(function() {
$(".tc-lightbox-wrap").click(function() {
});
});
It works, but I do not know how to find out which div has lost class and how to do it by scrolling the screen
I have no idea.

Div Overflow event in jquery

I am trying to trigger an event on div overflow and display the continued contents on to a new div, Is there any way this can be achieved,
basically what I am trying to do is to display a document, page wise and every page is represented as a div and the div will have a particular height and width, so all I want to do is to display the hidden contents from the first div in a new div once that div has triggered a overflow event, any help would be appreciated.
Add the event that adjust more to your needs to your div and handle it,
Or simple catch the event and do what you want:
$( "#yourDiv" ).click(function() {
// do stuff
});
EDIT : check this links:
CHROME: http://help.dottoro.com/ljgsfkbc.php
FIREFOX: http://help.dottoro.com/ljgsfkbc.php

Manually trigger a scroll event of DOM element?

I have two independent web elements, if I scroll the content of one element, I also want the 2nd element scroll at same time. Here is an example: https://stackedit.io
I did the following code, but it is not working:
element.find('.fullscreen-mk-content-textarea').on('scroll', function(e){
// first element will trigger this event, then manully trigger the
// the scroll of the 2nd element. It's my plan.
console.log(e); // works
element.find('.right-side').trigger('scroll'); // doesn't work...
});
What shall I do?
Vanilla Javascript
var el = document.querySelector(".right-side");
el.dispatchEvent(new Event('scroll'));
Try this jsFiddle.
$('.e1').scroll(function(e){
$('.e2').scrollTop(parseInt($('.e1').scrollTop()));
});
You can just set the scrollTop value of the other to match. That will cause it to scroll a desired amount. That's how you scroll something. It won't cause it to scroll by trying to trigger a scroll event. A scroll event is an indicator of some scroll motion, not something that causes scroll motion.
If using jQuery, you can use .scrollTop() to retrieve the current value of the scroll or .scrollTop(val) to set the amount of scroll.

JQuery: How to select window and some other divs by id?

I have a context menu that pops up whenever a click happens at a certain div inside a container and I want it to hide if either the window element or its container is scrolled.
How can I add the 'window' element in there?
$("#tree-container").scroll(function(){
$cxtMenu.hide();
});
If i understand your question, try:
$("#tree-container").add(window).scroll(function(){
$cxtMenu.hide();
});
If not, please consider to provide a jsFiddle which replicates your issue
You can add a scroll handler directly to the window like
$( window ).scroll(function() {
//Do stuff
});
(Per "Example: To do something when your page is scrolled" of http://api.jquery.com/scroll/)

jQuery scrollTop goes to the target then rolls up

I am using jQuery function scrollTop so when an element with a certain class is clicked your location changes. Here's what I have done:
$(document).ready(function (){
$(".paginacion").click(function() {
$(document).scrollTop( $("#galeria").offset().top );
});
});
I am navigating though a pagination menu which is in the middle of the page and I want to go back to that menu when I use the utility (clicking any element with the pagination class).
When I click any of those elements the page scrolls down for an instant but then scrolls back up.
What's wrong?
The <a> tag has a default href anchoring, which jumps to the target id and changes the URL hash/fragment. Just like #Khanh TO's example on the comment.
But if you are really wanting to handle this with jQuery. A good solution would be to first use preventDefault() which cancels the default execution on click event. Then switch to 'window' instead of 'document' when setting scrollTop. Both are going to have the same effect but $(window).scrollTop(value) is supported by all browsers.
$(".paginacion").click(function(e) {
e.preventDefault();
$(window).scrollTop( $("#galeria").offset().top );
});
If you are also looking to animate the scrolling, you just need to replace $(window).scrollTop() with:
$('html, body').animate({scrollTop: $("#galeria").offset().top});
FireFox and IE places the overflow at the html level so in order for animate(scrollTop) to work cross-browsers we need to include 'html'.
See this jsfiddle.

Categories