javascript - 平滑滚动特定标签类似溢出使用 OnClick

Question

我想创建一个div标签“onlySrollThisID”可以在按下触发按钮后滚动。但仅限那部分。例如，这里我有以自定义速度滚动的代码。

但是下面的代码将运行在所有内容上，包括页眉、侧边栏和页脚。在这里，我尝试仅在 div 标签“onlySrollThisID”上滚动。

这是代码。

<div style="position:fixed;top:0;left:0;background:#fff;z-index:10">
<button onclick='slowScroll();'>-</button>
<button onclick='fastScroll();'>+</button>
SPEED TEST: <span id='valueScroll'>0</span>
</div>
<br>
HEADER
<hr>

<div id='onlySrollThisID' style="float:left;width:120px">
Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>
</div>


<p>Hello World..</p>
<p>This is Sidebar Right</p>

<div style="clear:both"></div>
<hr>
FOOTER


<script type='text/javascript'>

function starScroll(){window.scrollBy(0,1),scrolldelay=setTimeout(starScroll,250)}
function fastScroll(){
starScroll(),valSpeed=document.getElementById("valueScroll").innerHTML,hitSpeed=+valSpeed+17,document.getElementById("valueScroll").innerHTML=hitSpeed;
if(valSpeed<17){window.scrollTo('',0)}
}
function slowScroll(){
clearTimeout(scrolldelay),valSpeed=document.getElementById("valueScroll").innerHTML,hitSpeed=+valSpeed-17;
if(valSpeed>0){document.getElementById("valueScroll").innerHTML=hitSpeed}else{document.getElementById("valueScroll").innerHTML=0}
}

</script>

那么，有没有办法只在特定字段上滚动？因此，HEADER、SIDEBAR、FOOTER 位置将保留在那里，而不参与滚动。 可以吗？

Answer 1

很简单。您只需要更新一点代码即可。

将 CSS 添加到“onlySrollThisID”

height:90%;overflow:auto; //Adjust to your blog space

搜索此代码

function starScroll(){
window.scrollBy(0,1),scrolldelay=setTimeout(starScroll,250)
}

更改为

function starScroll(){
$("#onlySrollThisID").scrollTop($("#onlySrollThisID").scrollTop()+1),scrolldelay=setTimeout(starScroll,500);
}

完整代码

<div style="position:fixed;top:0;left:0;background:#fff;z-index:10">
<button onclick='slowScroll();'>-</button>
<button onclick='fastScroll();'>+</button>
SPEED TEST: <span id='valueScroll'>0</span>
</div>
<br>
HEADER
<hr>

<div id='onlySrollThisID' style="float:left;width:120px;height:90%;overflow:auto">
Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>Scroll Me<br>
</div>


<p>Hello World..</p>
<p>This is Sidebar Right</p>

<div style="clear:both"></div>
<hr>
FOOTER

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

function starScroll(){
$("#onlySrollThisID").scrollTop($("#onlySrollThisID").scrollTop()+1),scrolldelay=setTimeout(starScroll,500);
}
function fastScroll(){
starScroll(),valSpeed=document.getElementById("valueScroll").innerHTML,hitSpeed=+valSpeed+17,document.getElementById("valueScroll").innerHTML=hitSpeed;
if(valSpeed<17){window.scrollTo('',0)}
}
function slowScroll(){
clearTimeout(scrolldelay),valSpeed=document.getElementById("valueScroll").innerHTML,hitSpeed=+valSpeed-17;
if(valSpeed>0){document.getElementById("valueScroll").innerHTML=hitSpeed}else{document.getElementById("valueScroll").innerHTML=0}
}

</script>

示例:https://www.chordband.com/guitar/armada_dengerin_abang.htm