討論 » 開發

How to not the add advent listener" "window.onscroll" on textareas?

§
發表於:2021-03-09
編輯:2021-03-09

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

§
發表於:2021-03-09

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

§
發表於:2021-03-09

@Konf
executed shouldn't appear on the browser console

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

§
發表於:2021-03-10

That's a mess. Let me think..

§
發表於:2021-03-10

@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

§
發表於:2021-03-10

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.

§
發表於:2021-03-10

My browser is Chrome

§
發表於:2021-03-10

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

§
發表於:2021-03-10
編輯:2021-03-10

@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...

§
發表於:2021-03-10

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

§
發表於:2021-03-10

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

// ==UserScript==
// @name         Test2
// @version      1
// @author       Konf
// @match        https://greatest.deepsurf.us/*/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')
  };
})();
§
發表於:2021-03-10

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://greatest.deepsurf.us/en/scripts/419825-opera-browser-rocker-mouse-gestures-search-highlight

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

§
發表於:2021-03-10
編輯:2021-03-10

@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

q1k
§
發表於:2021-03-10
編輯:2021-03-10
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.

§
發表於:2021-03-10

https://greatest.deepsurf.us/en/scripts/419825-opera-browser-rocker-mouse-gestures-search-highlight

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

§
發表於:2021-03-11
編輯:2021-03-11

@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...

§
發表於:2021-03-11

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

發表回覆

登入以回覆