How to detect the bottom viewport scrollbar scrolling horizontally with Javascript / Jquery

Question

I am using the following code with a JS .scroll to detect when the bottom viewport scroll bar is being scrolled sideways (and then do something based on that event). It doesn't trigger when I target the HTML tag, but if I target the BODY tag with the .scroll, it does trigger.

The problem I'm seeing with the BODY tag scroll bar, is that it will only show up if you scroll all the way to the bottom of the 5000px I have the inner div set to. With what I believe is the natural, HTML-bottom-of-the-viewport-scroll-bar, it's always just sitting at the bottom of the browser window if there's something to scroll to, but I don't know how to detect it moving.

Is there a way for .scroll to detect it being scrolled, or is there another method that can detect if the viewport is scrolling sideways?

<html>
<head>
<title>Side Scroll</title>
<script src="js/jquery.min.js"></script>
</head>
<body>



<style>
.extra_wide_div {
   width: 6000px;
   height: 5000px;
   background: linear-gradient(to right, red , yellow);
}

html {
    overflow-x: auto;
    overflow-y: auto;
}
body {
/*
    overflow-x: auto;
    overflow-y: hidden;
*/
}
</style>



<div class="extra_wide_div">
Hello
</div>



<script>
$scrollTarget = $('html');
$scrollTarget.scroll(function(e) {
    console.log("scroll triggered");
});
</script>



</body>
</html>

Unmitigated · Answer 1 · 2018-08-14T19:05:47.753

0

You should select both the html and body tags to detect scrolling.

var $scrollTarget = $('html, body');
$scrollTarget.scroll(function(e) {
    console.log("scroll triggered");
});

This is because different browsers attach the scrollbar to different tags. The browsers Firefox and Internet Explorer utilize the html portion of this selector and webkit browsers like Chrome and Safari respond to the body.

For your CSS, you should target both the html and body tags when setting a fixed height.

html, body{
  height: 1000px;/*For scrolling*/
}

To set the height with Javascript, you can use jQuery's .css() function.

$('html, body').css("height", "1000px");

Demo:

$('html, body').css("height", "1000px");
$('html, body').animate({scrollTop: 500}, 500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Aug 14 '18 at 19:05

answered Aug 14 '18 at 18:35

Unmitigated

76,500
11
62
80

In testing using 'html, body', the code continues to not respond to the 'html' selector. It will trigger based on the 'body' selector portion, but this presents the same problem in that I have to uncomment the css for BODY overflow-x: auto to get it to work: and with that, I'm right back to having to scroll down 5000px to see the scroll bar at the bottom of the body. I am using Chrome for testing currently. – Chain Aug 14 '18 at 19:01
@Chain Your CSS should give both `body` and `html` tags the correct height for scrolling. – Unmitigated Aug 14 '18 at 19:02
The height will be variable in the end depending on database rows being output. How should the body and html tags get the same height set in css (or set by Javascript?) ? – Chain Aug 14 '18 at 19:04
@Chain `$('html, body').css("height", calculatedHeight)` – Unmitigated Aug 14 '18 at 19:05
I believe you're saying I should calculate the height of the body with JS and then pass that into the .css setter so that the html and body stay in sync. Where should I put this? Should it be put right before the .scroll function, or is it part of the .scroll function? – Chain Aug 14 '18 at 19:19
@Chain Where do you calculate the height of the body? – Unmitigated Aug 14 '18 at 19:20
Actually: that part doesn't matter: I set the HTML tag to 500px to match the body like so: html { overflow-x: auto; overflow-y: auto; height: 5000px; } body { overflow-x: auto; overflow-y: hidden; height: 5000px; } It still puts the scroll bar all the way at the bottom of the 5000 pixels. I just want to detect the browser window scrollbar scrolling horizontally. – Chain Aug 14 '18 at 19:27
@Chain Put the height property in the same block `html, body` and put the other properties in different CSS blocks. – Unmitigated Aug 14 '18 at 19:28
I've done that: html, body { height: 5000px; } html { overflow-x: auto; overflow-y: auto; } body { overflow-x: auto; overflow-y: hidden; } . Since it's only responding to the body tag, I need to turn on overflow-x: auto; for the body to get it to even scroll sideways while detecting the movement: but again, the scroll bar is down 5000px instead of at the base of the viewport/browser-window. – Chain Aug 14 '18 at 19:39
@Chain What are you trying to achieve? – Unmitigated Aug 14 '18 at 19:42
I found the answer in the Answer I posted (which google was not finding until someone found my post to be a close dup of the link in the Answer. One just needs to target 'window' and not the other tags. Cheers. – Chain Aug 14 '18 at 19:51

score 0 · Answer 2 · answered Aug 14 '18 at 19:50

0

The answer can be found here (you don't target body nor html: you target 'window' without the quotes): How to detect horizontal scrolling in jQuery?

answered Aug 14 '18 at 19:50

Chain

597
2
8
24

How to detect the bottom viewport scrollbar scrolling horizontally with Javascript / Jquery

2 Answers2