平滑滾動像素步長
[英]Smooth Scroll pixel steps
問題描述
我在這里需要一點幫助。 我復制了包括html和css表單jsfiddle在內的此javascript，以使其以匹配的形式用於我的網站。 但是，如果我從這方面正在工作的那一側復制代碼，並在匹配之前嘗試一下就行不通了。 按照我復制的代碼，哪里出了問題？
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html><head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="scroll.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" href="css.css">
</head>
<body>
<a id="scrollUp" href="#">up</a>
<a id="scrollDown" href="#">down</a>
<div id="wrapper">
<div id="content">
<ul>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
</ul>
</div>
</div>
</body>
</html>
CSS：
#content {
overflow:auto;
height: 90px;
}
JAVASCRIPT：
var step = 25;
var scrolling = false;
// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function (event) {
event.preventDefault();
// Animates the scrollTop property by the specified
// step.
$("#content").animate({
scrollTop: "-=" + step + "px"
});
}).bind("mouseover", function (event) {
scrolling = true;
scrollContent("up");
}).bind("mouseout", function (event) {
scrolling = false;
});
$("#scrollDown").bind("click", function (event) {
event.preventDefault();
$("#content").animate({
scrollTop: "+=" + step + "px"
});
}).bind("mouseover", function (event) {
scrolling = true;
scrollContent("down");
}).bind("mouseout", function (event) {
scrolling = false;
});
function scrollContent(direction) {
var amount = (direction === "up" ? "-=1px" : "+=1px");
$("#content").animate({
scrollTop: amount
}, 1, function () {
if (scrolling) {
scrollContent(direction);
}
});
}
你能幫我么？
2 個解決方案
解決方案1
0 2014-01-20 16:53:06
嘗試更換bind為on 。
如參考頁中所述；
從jQuery 1.7開始，.on（）方法是將事件處理程序附加到文檔的首選方法。
解決方案2
0 2015-01-08 10:50:53
您的腳本已加載到標頭中，但它引用的#scrollUp和#scrollDown元素要等到頁面稍后才加載。 由於您使用的是jQuery，請嘗試將您的JavaScript放入文檔就緒函數中。 即
$(document).ready(function () {
// Your code
});
水平滾動div像素數量，無滾動條
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.