Question

我想创建一个div标签＆＃34; onlySrollThisID＆＃34;按下触发按钮后可以滚动。但只有那一部分。例如，这里我有一个以自定义速度滚动的代码。

但是下面的代码会遇到所有内容，包括标题，侧边栏和页脚。在这里，我尝试仅滚动div标签＆＃34; onlySrollThisID＆＃34;仅

这是代码。

<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

Answer 2

滚动位置与div类似。

尝试使用

document.getElementById('onlySrollThisID').scrollTo(0, 0);

用X，Y位置替换（0,0）

Answer 3

如何像第一个div一样修复页眉，页脚和侧边栏的位置怎么样？

平滑滚动特定标记类似溢出使用OnClick

3 个答案: