jquery scroll doesn't work in my website

Question

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

Answer 1

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