There is such a function to determine whether there is a scroll or not (this is what is found by searching in CO, if you know the function better - attach it to the answer, please, or in the comments):

function get_scroll(a) { var d = document, b = d.body, e = d.documentElement, c = "client" + a; a = "scroll" + a; return /CSS/.test(d.compatMode)? (e[c]< e[a]) : (b[c]< b[a]) };

Using:

 get_scroll('Width') – есть ли горизонтальный скролл get_scroll('Height') – есть ли вертикальный скролл

And I would like to know how to upgrade it on js in order to track the presence of a scroll in the body in real time, well, and take some action. For example, inject a text into a paragraph about whether it is or not.
The question is probably more about tracking in real-time the properties of the element, but they often ask the question “why is this implementation necessary?” So I immediately decided to tell the root cause.

  • What does "real time" mean? Client js, what in unreal time is somehow executed? - Sublihim
  • @Sublihim, if I write such code in the <script> at the very bottom of the body tag as in the question and also call console.log(get_scroll('Width')) for the call, it will be executed cyclically until the end of the centuries ? It is not true. - VostokSisters
  • one
    @VostokSisters, add recursion to the function and it will be infinitely invoked -
  • one
    @MasterAlex, well, of course you can, but I do not think that this is a good approach for performance ... - VostokSisters
  • @VostokSisters, the second option is via setInterval -

1 answer 1

I did not find a solution to monitor the appearance and disappearance of the cursor in real time. In any case, there is no direct solution (discarding the variant with the recursive function of checking through the interval).
We can only restrict ourselves to observe the changes that may occur, and in consequence of which they will affect the appearance of the scroll on the page. We catch these actions (or we envisage them in simple cases), and we react with the check function, which does something in connection with this that you need. The implementation is strictly user-friendly and there is hardly any modular solution ever to come in the form of a library.
To view events, you can “hang up” events using the .addEventListner method, and for such complicated ones as adding to the house (or deleting), awarding a class element (and which class), you can monitor MutationObserver . The last is a complicated thing that requires optimization for Firefox and be ready (if you haven’t worked with this before) to spend considerable time on understanding, if you really are not going to just follow the addition of a class to an element.
In the end, I used a bundle: monitor the resize of the window, as well as the MutationObserver for more complex pieces that can occur with elements, and that can affect the appearance of the scroll. You can potestit that I did, if you want, here . When loading, there is no scrolling, after the appearance of the images nothing flies. When you click on a picture, a modal window opens, if you change the height, a scroll will appear, but the picture in the modal window will not leave to the left, and I provided for many other trifles. But I don’t think I can describe a cross-project solution, so I don’t cite any cat.
The answer to the question, in principle, ends, but if you're interested, then an example: the implementation of scroll control on VK. If you open a page on this site without scrolling (for example, bookmarks, they should not be particularly clogged), and start resizing the window in height, the scroll will appear and disappear (down by resize), but the page itself will not move to the left ( adding a scroll) or to the right (if it is missing).
On VKontakte it is implemented clumsily, very. If you get into the element viewer, you will see the body function 'onBodyResize ()', which, apparently, implements all the logic. If we climb and navigate the div wrappers of the site, including the modal window (where the scroll control is also provided), we will see that they always inline new style parameters, such as height and width, when resizing the window. That is, this is always a recalculation of styles, which is very expensive, but it seems that the work of the site is successful in terms of performance, but also a solution.

  • The answer like "There is an answer here: link" is the answer-link, which is prohibited here. - user207618
  • @Other, well, mark as a duplicate, what's the problem. - VostokSisters
  • @Other, or do you want me to copy the answer from another question? Because the answer is the same objectively. - VostokSisters
  • But this is not a duplicate question. Copying at least the essence of someone else's response is already something. - user207618
  • @Other, that is, if I copy the text from the answer (instead of the above link with my own explanations), I’ll fall asleep with the pluses, and if I give a link to the topic, the answer of which I can use to solve my problem, is it condemned? Listen, I have already met for the second time that I am doing something not by the rules. Is there any way to follow logic, and not dry rules? - VostokSisters