Greasy Fork

This is bugging me a lot. On any textareas the code below removes the focus of the box when any textarea shows the scroll bar, so this requires me to click again on the text box to have focus and keep writing what I was writting. I think that the only solution for this would be to find a way to not add the advent listener to textareas, but if you know any better approach to fix this please let me know as well!


//if (document.querySelectorAll("textarea").length === 0) //If there's no textareas on the page, I want a better approach...
//{ //Starts the if condition
window.onscroll = async function() { //When the page is scrolled
console.log('executed')
}; //Finishes the onscroll advent listener
//} //Finishes the if condition

I don't get it. Can you provide any somewhat working example of the problem?

@Konf
executed shouldn't appear on the browser console

https://letsupload.io/2Q8yc/ScreenCapture_2021-3-9_19.34.36.mp4

That's a mess. Let me think..

@Konf

Sure!
My temporary solution to not run console.log('execute') was to check if the page has any textareas, and if true/yes don't add the scroll advent listener...
But if I could only not add the scroll advent listener to the text area would be much better

Wait a minute.. You got the result on the video when adding a listener to a window? When I do that:

window.onscroll = function() {
  console.log('executed')
};

I have no triggering on textarea scrolling, only outside it, on a window.

My browser is Chrome

I thought your problem is caused by someTextArea.onscroll = ...

@Konf

My browser is opera. Yes, the console.log was trigged by the textarea, not by the window, thought I added the advent listener to the window.onscroll, not to the textarea element.
I think that this is because tampermonkey considers textareas as being iframes... I think that when I used //@noframes on tampermonkey this bug stopped... But the problem is that there are a lot of things that I would like to run inside textareas...

Would window.adventlistener('scroll' really be that much different and fix the problem? I don't think so...

edge chromium also showed the console.log message, but at least didn't unfocus the text area

I have just tested the code on Opera with Tampermonkey. Scrolling the textarea does nothing

// ==UserScript==
// @name         Test2
// @version      1
// @author       Konf
// @match        https://greasyfork.org/*/discussions/development/78213-how-to-not-the-add-advent-listener-window-onscroll-on-textareas
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  window.onscroll = function() {
    console.log('executed')
  };
})();

That's weird...

I will test that too...

You can add the console log on the scroll listener on the script that has this bug, it's this one:
https://greasyfork.org/en/scripts/419825-opera-browser-rocker-mouse-gestures-search-highlight

The scroll listener is on the end of the script codes.

@Konf

Yeah, your code didn't do anything even when the text area was scrolled. It might be something on that script that is making the textareas have the window.onscroll advent listener added to them....

I've also tried textarea { overflow: hidden; } textarea {resize: none;} bug this didn't fix the bug

document.querySelectorAll("textarea").forEach(
  function(el){
    el.addEventListener("wheel", function(){
      console.log("scrolled");
    });
  }
)

You can use either "scroll" or "wheel".

The difference is that 'scroll' fires whenever the scrollbar moves even with a keyboard, so you might want to use wheel instead depending on what you are trying to do.

https://greasyfork.org/en/scripts/419825-opera-browser-rocker-mouse-gestures-search-highlight

Just replace it to window.addEventListener('scroll', function() {...})

@q1k
@Konf

Thanks for your help!
Both suggestions worked...

But I've a last question... Why the hell did your suggestion work? This didn't make sense to me...

It is something about event capturing and bubbling. I don't have exact answer for now