How to get the divs current scroll position?

15,023

You can do it using jQuery like so:

//axis y position (or top position)
$('[ref="table_container"]').scrollTop()
//axis x position (or left position)
$('[ref="table_container"]').scrollLeft()

Or using javascript only like so:

//axis y position (or top position)
document.querySelectorAll('[ref="table_container"]').scrollTop;
//axis x position (or left position)
document.querySelectorAll('[ref="table_container"]').scrollLeft;

You can read more about it here.

Element.scrollLeft

The Element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled to the left.

Share:
15,023
Sijan Shrestha
Author by

Sijan Shrestha

If you Believe, you can achieve. <- But working your ass off is important too!

Updated on June 04, 2022

Comments

  • Sijan Shrestha
    Sijan Shrestha almost 2 years

    I want to know the scroll position of a div.
    I have two buttons left and right and in between there is a scroll-able div with data populated inside it.
    I want to disable the button at the right if there is no data in right and disable the button to the left if no more data at the left. For that i think i need to know the current scroll position. Any suggestion to enhance this will be awesome.

     `    return <div className="row">
            <div ref="previous_column" onClick={this.shift_left} href="#" style={style_div}></div>
            <div className="table-container" ref="table_container"> 
                <div className="sliding-window">
                        {this.props.grocery_cart.delivery_slots.map(function(obj) {
                                return <div key={d}>
                                            <CalendarDetail values={d} ref="delivery_date"/>
                                        </div>
                        }.bind(this))}
                 </div>
            </div>
            <div ref="next_column" href="#" onClick={this.shift_right} style={style_div} className="plr-slide"></div>
     </div>`
    

    I have just added few relevant codes.

    The Previous columns and next columns are the divs (left and right button)

    The Table Container is a fixed div and the sliding window inside it slides.

  • Sijan Shrestha
    Sijan Shrestha over 8 years
    I want to the left right position ... scroll top give mes vertical position
  • Sijan Shrestha
    Sijan Shrestha over 8 years
    i want to scroll in horizantal.. Left to right and disable .Does scrollTop() give me the x axis position?
  • Attenzione
    Attenzione over 8 years
    so you need div.position().left
  • Sijan Shrestha
    Sijan Shrestha over 8 years
    Thank you so much. $('.table-container').scrollLeft() This fixed the problem.
  • user3806549
    user3806549 over 8 years
    @Attenzione what he said.
  • Adi Darachi
    Adi Darachi over 8 years
    he wants the scroll position... not the position of the element.. Read the question