I would like to display indicators for a certain div to show that it can be scrolled right or left depending on its state. To do so I would need to know if element can be scrolled to respective positions, e.g. if there is content to be seen on the right show indicator and after scrolling show another indicator on the left to indicate that users can now scroll there as well. I have a simple setup like this one: /

(You can scroll horizontally, scrollbar is hidden intentionally)

HTML:

<div class="scroll-container">
    <div class="scroll-content">
        Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally 
    </div>
</div>

CSS:

.scroll-container {
    width: 80%;
    margin: 0 auto;
    background: cyan;
    overflow-y: hidden;
    height: 36px;
}

.scroll-content {
    padding: 10px 0;
    height: 50px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}

I would like to display indicators for a certain div to show that it can be scrolled right or left depending on its state. To do so I would need to know if element can be scrolled to respective positions, e.g. if there is content to be seen on the right show indicator and after scrolling show another indicator on the left to indicate that users can now scroll there as well. I have a simple setup like this one: https://jsfiddle/udv8u596/

(You can scroll horizontally, scrollbar is hidden intentionally)

HTML:

<div class="scroll-container">
    <div class="scroll-content">
        Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally 
    </div>
</div>

CSS:

.scroll-container {
    width: 80%;
    margin: 0 auto;
    background: cyan;
    overflow-y: hidden;
    height: 36px;
}

.scroll-content {
    padding: 10px 0;
    height: 50px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}

• javascript
• jquery
• css

• 1 Well if you get rid of the overflow-y on the container then a scrollbar will appear. Isn't that the best indicator :) – Huangism Commented Mar 26, 2015 at 16:13
• @Huangism As I said, it is hidden intentionally as I want custom controls for this (this will be mainly for mobile view, where scrollbars don't look as good for horizontal scroll) – Ilja Commented Mar 26, 2015 at 16:16
• 2 Are you wanting a CSS only solution? It can be done easily with JavaScript. Can get an element's left offset from its wrapper element/window and when it goes into the negative, show the scroll left stuff. If the offset + the width is greater than the window, show the 'scroll right' indicator. Update on scroll, obviously. – Jacob Commented Mar 26, 2015 at 16:18
• @LagWagon I was actually looking forward for a javaScript/jQuery solution and what you explained seems like it could work, would you like to post it as an answer? – Ilja Commented Mar 26, 2015 at 16:24

3 Answers 3

To check if an element is overflowing along the x-axis, you can simply pare its puted width, accessible via jQuery's .width() method, and its scrollWidth, a native JS function:

var $ele = $('.scroll-content'),
    overflowing = $ele[0].scrollWidth > $ele.width();

You can then check the boolean value of overflowing if the element is overflowing or not. However, note that if you want this variable to be updated if the window resizes, a little more work has to be done:

var $ele = $('.scroll-content'),
    overflowing = function() {
        if($ele[0].scrollWidth > $ele.width()) {
            return true;
        } else {
            return false;
        }
    };

console.log(overflowing());

$(window).resize(function() {
    console.log(overflowing());
});

Here's a fiddle with the above logic implemented, with some slight modifications: https://jsfiddle/teddyrised/udv8u596/5/

Ilya basically you need to check your element right postion. On way of achieving this is to set the inner element to have absolute oistion and get right postion with jQuery

parseInt($('.scroll-content').css('right')) >= 0

I have modified you code as: https://jsfiddle/udv8u596/4/

In this example before animating the element it checks if the righ position is bigger than 0.

Please not that righ position is calculated based on the parent element. Left position is set to be 0 in the css but righ postion will be calculated in this example is ~-250.

I hope this gives you an idea how to solve your problem.

Here's a quick start for what you are looking for :

HTML

<div class="scroll-container">
    <div class="mask">
    <div class="scroll-content">
        Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally 
    </div>
    </div>
</div>
<div class="scrollRight">Scroll Right &raquo;</div>
<div class="scrollLeft">&raquo; Scroll Left </div>

CSS

.scroll-container {
    width: 80%;
    margin: 0 auto;
    background: cyan;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 36px;
}
.mask{
    position:relative;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 36px;
    width: 100%;
}
.scroll-content {
    position:absolute;
    padding: 10px 0;
    height: 50px;
    white-space: nowrap;
    overflow-x: visible;
    width:auto;
}
.scrollRight, .scrollLeft{
    font-size:10px;
    display:none;
}

JS

var contentWidth = $(".scroll-content").width();
var containerWidth = $(".scroll-container").width();

if(contentWidth>containerWidth){
    $(".scrollRight").show();
}

$("body").on("click", ".scrollRight", function(){
    var scrollValue = contentWidth-containerWidth;
    $(".scroll-content").animate({"margin-left":"-"+scrollValue+"px"});
    $(".scrollRight").hide();
    $(".scrollLeft").show();
})

$("body").on("click", ".scrollLeft", function(){
    var scrollValue = contentWidth-containerWidth;
    $(".scroll-content").animate({"margin-left":"0px"});
    $(".scrollRight").show();
    $(".scrollLeft").hide();
})

See Update JSFiddle