CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hussein Ojaghi
Hussein Ojaghi

Reputation: 2290

jquery scroll doesn't work in my website

i'm going to use jquery scroll in some part of my webiste. the code that i have used is below of course i wrapped this code with $(document).ready():

var div = $('#wrap'),
    wrapScreenHeight = div.height(),
    wrapHeight = div.outerHeight(),
    listHeight = div.find('ul').outerHeight();

div.on('mousemove', function(e) {
    var cPointY = e.pageY,
        dP = ((cPointY / wrapHeight));
    div.scrollTop((listHeight * dP) - wrapScreenHeight);

});

and my html and css is:

<div id="wrap">
                <ul>

            <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
            <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li> 
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                    <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a>just comedown but it doesn't go up</h3></li>


                  </ul>
                </div>

the code work fine on jsfiddle but unfortunately when im using it in my website, it just goes down but doesn't go up while mouse moves. this is my website link==>in my website i wrap the scroll section with 1px red border!! and this is the jsfiddle

Upvotes: 4

Views: 159

Answers (1)

ojovirtual
ojovirtual

Reputation: 3362

It also doesn't work in Fiddle, you think it works but if you put your div 300px down (for example), it behaves the same as on your site (see your fiddle modified and it doesn't work).

When onmousemove triggers, e has the value of the mouse relative to the document. You need this value relative to your div.

var div = $('#wrap'),
    wrapScreenHeight = div.height(),
    wrapHeight = div.outerHeight(),
    listHeight = div.find('ul').outerHeight();

div.on('mousemove', function(e) {
    var cPointY = e.pageY-$(this).position().top, //<== the position of the cursor relative to the div, not the document
        dP = ((cPointY / wrapHeight));
    div.scrollTop((listHeight * dP) - wrapScreenHeight);

});

Fiddle

Upvotes: 2

Related Questions