javascript - How to get the divs current scroll position? - Stack Overflow

admin管理员组

文章数量:1277322

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.

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.

• javascript
• jquery
• scroll
• reactjs

Share Improve this question Follow asked Dec 18, 2015 at 11:46 Sijan ShresthaSijan Shrestha 2,26688 gold badges2929 silver badges5252 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

You can use div.position();

And then do position.top

本文标签： javascriptHow to get the divs current scroll positionStack Overflow