我将在我的网站的某些部分使用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] 删除。
我来说两句