jQuery滚动不适用于我的网站

侯赛因·奥贾吉(Hussein Ojaghi)

我将在我的网站的某些部分使用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

虚拟的眼睛

它在Fiddle中也不起作用,您认为它可以工作,但是div,例如,如果您放下300px,它的行为与您网站上的行为相同(请参见对Fiddle进行了修改,但它不起作用)

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

});

小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章