jquery滚动在我的网站上不起作用

Question

我将在我的网站的某些部分使用jquery滚动。 我使用的代码当然在下面，我用$（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);

});

我的HTML和CSS是：

<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>

代码在jsfiddle上正常工作但不幸的是当我在我的网站上使用它时，它只是下降但是在鼠标移动时不会上升。 这是我的网站链接 ==>在我的网站上我用1px红色边框包裹滚动部分!! 这就是jsfiddle

Answer 1

它也不适用于Fiddle，你认为它可以工作但是如果你把你的div 300px放下（例如），它的行为与你的网站上的行为相同（见你的小提琴被修改，它不起作用） 。

当onmousemove触发时， e具有相对于文档的鼠标值。 你需要这个相对于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);

});

小提琴