jQuery - Trigger event if a horizontally-scrollable div is at the left most and right most of scroll
<p>I have a horizontally-scrollable div:</p>

<pre><code>&lt;div id = "scrollable-div"&gt;
    &lt;div class = "div-inside"&gt;&lt;/div&gt;
    &lt;div class = "div-inside"&gt;&lt;/div&gt;
    &lt;div class = "div-inside"&gt;&lt;/div&gt;
    &lt;div class = "div-inside"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I would like to trigger an event when the user scrolls to the extreme right of the div, and then another event when they scroll back to the extreme left of the div. I have the following code that triggers an event when I get to the extreme right:</p>

<pre><code>jQuery(function ($) {
        $('#scrollable-div').on('scroll', function () {
            if ($(this).scrollLeft() + $(this).innerWidth() &gt;= $(this)[0].scrollWidth) {
                $('#end-treatment').show();

            }
        })
    }); 
</code></pre>

<p>But I can't seem to get it work when going back to the left. Basically, I would like to show one div when scrolled to extreme right and another when scrolled back to extreme left. Is this possible? Thanks..</p>