通过滚动页面上的任何位置滚动溢出的div [英] Scroll an overflowing div by scrolling anywhere on the page
本文介绍了通过滚动页面上的任何位置滚动溢出的div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想通过滚动页面上的任何位置触发滚动一个包含溢出内容的div，而不只是移动鼠标并在div中单击。此外，我想隐藏div的滚动条，只有页面的滚动条是可见的。
最好的解决方案是基于CSS，但JS解决方案也可以工作。
这里是我的jsfiddle演示了这个问题： http://jsfiddle.net/trpeters1/RMZsX/8/
我会在这里复制代码，但是我把一堆填充文本
对于你的引用，我想滚动页面的内部div的名称有一个 id = scrollMeToo。
解决方案
var curScroll = 0; $（window）.bind（'mousewheel DOMMouseScroll'，function（e）{var evt = window.event || e; var delta = evt.detail？evt.detail *（ - 120）：evt.wheelDelta; if（delta< 0）{// scroll down curScroll + = 10; } else {//向上滚动curScroll - = 10; } $（'＃scrollMeToo'）。scrollTop（curScroll）; return true;}）;
#scrollMeToo {height：200px; width：150px; overflow：auto;位置：相对; overflow-y：hidden;}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"> ;</script> < p>广告绑腿keytar，早午餐id艺术党dolor labore。 Pitchfork yr enim lo-fi before they sold out qui。 Tumblr农场对表自行车权利。 Anim keffiyeh carles羊毛衫。 Velit seitan mcsweeney的照片亭3狼月亮irure。 Cosby毛衣lomo牛仔裤短裤，威廉斯堡帽衫迷你你可能没有听说过他们和开衫信托基金生物柴油wes安德森审美。 Nihil纹身accusamus，可口的讽刺生物柴油keffiyeh工匠乌拉姆科。 < / p> < p>广告绑腿keytar，早午餐id艺术党dolor labore。 Pitchfork yr enim lo-fi before they sold out qui。 Tumblr农场对表自行车权利。 Anim keffiyeh carles羊毛衫。 Velit seitan mcsweeney的照片亭3狼月亮irure。 Cosby毛衣lomo牛仔裤短裤，威廉斯堡帽衫迷你你可能没有听说过他们和开衫信托基金生物柴油wes安德森审美。 Nihil纹身accusamus，可口的讽刺生物柴油keffiyeh工匠乌拉姆科。 < / p> < p>广告绑腿keytar，早午餐id艺术党dolor labore。 Pitchfork yr enim lo-fi before they sold out qui。 Tumblr农场对表自行车权利。 Anim keffiyeh carles羊毛衫。 Velit seitan mcsweeney的照片亭3狼月亮irure。 Cosby毛衣lomo牛仔裤短裤，威廉斯堡帽衫迷你你可能没有听说过他们和开衫信托基金生物柴油wes安德森审美。 Nihil纹身accusamus，可口的讽刺生物柴油keffiyeh工匠乌拉姆科。 < / p>< hr>< div id =scrollMeToo> < h4 id =fat> @ fat< / h4> < p>广告绑腿keytar，早午餐id艺术党dolor labore。 Pitchfork yr enim lo-fi before they sold out qui。 Tumblr农场对表自行车权利。 Anim keffiyeh carles羊毛衫。 Velit seitan mcsweeney的照片亭3狼月亮irure。 Cosby毛衣lomo牛仔裤短裤，威廉斯堡帽衫迷你你可能没有听说过他们和开衫信托基金生物柴油wes安德森审美。 Nihil纹身accusamus，可口的讽刺生物柴油keffiyeh工匠乌拉姆科。 < / p> < h4 id =mdo> @ mdo< / h4> < p> Veniam马法髭滑板，adipisicing fugiat velit干草叉胡子。 Freegan胡子aliqua cupidatat mcsweeney的vero。丘比特四个loko nisi，ea helvetica nulla carles。纹身cosby毛衣食物卡车，mcsweeney的quis非freegan乙烯基。 Lo-fi wes安德森+1标准。 Carles非美学运动quis gentrify。布鲁克林adipisicing工艺啤酒副keytar deserunt。 < / p> < h4 id =one>一< / h4> < p>食用油。 Fap工艺啤酒deserunt滑板ea。 Lomo顾客服务与广告有可能联系我们在线交谈与我们联系乒乓键航海全球性Nasco艺术&高生命乙烯基，回声公园后果quis aliquip banh mi干草叉。 Vero VHS预测。 Consectetur nisi DIY最小信使包。 Cred过去，可持续发展consetetur屁股包iphone。 < / p> < h4 id =two>两个< / h4> < p>在无所不在的回声公园，官僚deserunt mcsweeney的proident主清洗thundercats sapiente veniam。 Excepteur VHS精华，proident shoreditch +1生物柴油工艺啤酒。单原产咖啡的旅行者irure四萝卜，丘比特特里理查德森主清洗。 Assumenda你可能还没有听说过他们的艺术党屁股包，纹身nulla开衫时间广告。 Proident wolf nesciunt sartorial keffiyeh eu banh mi可持续发展。 Elit狼狼吞虎咽，洛杉矶波特兰之前，他们卖掉了四个loko。布鲁克林nesciunt。 < / p> < h4 id =three> three< / h4> < p>广告绑腿keytar，早午餐id艺术党dolor labore。 Pitchfork yr enim lo-fi before they sold out qui。 Tumblr农场对表自行车权利。 Anim keffiyeh carles羊毛衫。 Velit seitan mcsweeney的照片亭3狼月亮irure。 Cosby毛衣lomo牛仔裤短裤，威廉斯堡帽衫迷你你可能没有听说过他们和开衫信托基金生物柴油wes安德森审美。 Nihil纹身accusamus，可口的讽刺生物柴油keffiyeh工匠乌拉姆科。 < / p> < p> Keytar twee blog，culpa messenger bag marfa whatever delectus food truck。 Sapiente合成器假设。 Locavore sed helvetica cliche讽刺，thundercats你可能没有听说过他们的连帽无麸免费lo-fi fap aliquip。 Labore elit placeat之前他们卖完了，terry richardson proident brunch nesciunt quis cosby毛衣pariatur keffiyeh ut helvetica工匠。羊毛衫工艺啤酒seitan准备velit。 VHS chambray laboris tempor veniam。 Anim mollit minim commodo ullamco thundercats。 < / p>< / div>
你需要的，如果你不想让文档滚动，只需改变 return true; 到 return false; 。
非jQuery方法：
var curScroll = 0; function controlScroll（e）{var evt = window.event || e; var delta = evt.detail？ evt.detail *（ - 120）：evt.wheelDelta; if（delta< 0）{// scroll down curScroll + = 10; } else {//向上滚动curScroll - = 10; } document.getElementById（'scrollMeToo'）。scrollTop = curScroll;}; if（document.attachEvent）{//如果IE（和Opera取决于用户设置）document.attachEvent（onmousewheel，controlScroll）} else if（document.addEventListener）{// WC3 browsers document.addEventListener（mousewheel， controlScroll，false）}
#scrollMeToo {height：200px; width：150px; overflow：auto;位置：相对; overflow-y：hidden;}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"> ;</script> < p>广告绑腿keytar，早午餐id艺术党dolor labore。 Pitchfork yr enim lo-fi before they sold out qui。 Tumblr农场对表自行车权利。 Anim keffiyeh carles羊毛衫。 Velit seitan mcsweeney的照片亭3狼月亮irure。 Cosby毛衣lomo牛仔裤短裤，威廉斯堡帽衫迷你你可能没有听说过他们和开衫信托基金生物柴油wes安德森审美。 Nihil纹身accusamus，可口的讽刺生物柴油keffiyeh工匠乌拉姆科。 < / p> < p>广告绑腿keytar，早午餐id艺术党dolor labore。 Pitchfork yr enim lo-fi before they sold out qui。 Tumblr农场对表自行车权利。 Anim keffiyeh carles羊毛衫。 Velit seitan mcsweeney的照片亭3狼月亮irure。 Cosby毛衣lomo牛仔裤短裤，威廉斯堡帽衫迷你你可能没有听说过他们和开衫信托基金生物柴油wes安德森审美。 Nihil纹身accusamus，可口的讽刺生物柴油keffiyeh工匠乌拉姆科。 < / p> < p>广告绑腿keytar，早午餐id艺术党dolor labore。 Pitchfork yr enim lo-fi before they sold out qui。 Tumblr农场对表自行车权利。 Anim keffiyeh carles羊毛衫。 Velit seitan mcsweeney的照片亭3狼月亮irure。 Cosby毛衣lomo牛仔裤短裤，威廉斯堡帽衫迷你你可能没有听说过他们和开衫信托基金生物柴油wes安德森审美。 Nihil纹身accusamus，可口的讽刺生物柴油keffiyeh工匠乌拉姆科。 < / p>< hr>< div id =scrollMeToo> < h4 id =fat> @ fat< / h4> < p>广告绑腿keytar，早午餐id艺术党dolor labore。 Pitchfork yr enim lo-fi before they sold out qui。 Tumblr农场对表自行车权利。 Anim keffiyeh carles羊毛衫。 Velit seitan mcsweeney的照片亭3狼月亮irure。 Cosby毛衣lomo牛仔裤短裤，威廉斯堡帽衫迷你你可能没有听说过他们和开衫信托基金生物柴油wes安德森审美。 Nihil纹身accusamus，可口的讽刺生物柴油keffiyeh工匠乌拉姆科。 < / p> < h4 id =mdo> @ mdo< / h4> < p> Veniam马法髭滑板，adipisicing fugiat velit干草叉胡子。 Freegan胡子aliqua cupidatat mcsweeney的vero。丘比特四个loko nisi，ea helvetica nulla carles。纹身cosby毛衣食物卡车，mcsweeney的quis非freegan乙烯基。 Lo-fi wes安德森+1标准。 Carles非美学运动quis gentrify。布鲁克林adipisicing工艺啤酒副keytar deserunt。 < / p> < h4 id =one>一< / h4> < p>食用油。 Fap工艺啤酒deserunt滑板ea。 Lomo顾客服务与广告有可能联系我们在线交谈与我们联系乒乓键航海全球性Nasco艺术&高生命乙烯基，回声公园后果quis aliquip banh mi干草叉。 Vero VHS预测。 Consectetur nisi DIY最小信使包。 Cred过去，可持续发展consetetur屁股包iphone。 < / p> < h4 id =two>两个< / h4> < p>在无所不在的回声公园，官僚deserunt mcsweeney的proident主清洗thundercats sapiente veniam。 Excepteur VHS精华，proident shoreditch +1生物柴油工艺啤酒。单原产咖啡的旅行者irure四萝卜，丘比特特里理查德森主清洗。 Assumenda你可能还没有听说过他们的艺术党屁股包，纹身nulla开衫时间广告。 Proident wolf nesciunt sartorial keffiyeh eu banh mi可持续发展。 Elit狼狼吞虎咽，洛杉矶波特兰之前，他们卖掉了四个loko。布鲁克林nesciunt。 < / p> < h4 id =three> three< / h4> < p>广告绑腿keytar，早午餐id艺术党dolor labore。 Pitchfork yr enim lo-fi before they sold out qui。 Tumblr农场对表自行车权利。 Anim keffiyeh carles羊毛衫。 Velit seitan mcsweeney的照片亭3狼月亮irure。 Cosby毛衣lomo牛仔裤短裤，威廉斯堡帽衫迷你你可能没有听说过他们和开衫信托基金生物柴油wes安德森审美。 Nihil纹身accusamus，可口的讽刺生物柴油keffiyeh工匠乌拉姆科。 < / p> < p> Keytar twee blog，culpa messenger bag marfa whatever delectus food truck。 Sapiente合成器假设。 Locavore sed helvetica cliche讽刺，thundercats你可能没有听说过他们的连帽无麸免费lo-fi fap aliquip。 Labore elit placeat之前他们卖完了，terry richardson proident brunch nesciunt quis cosby毛衣pariatur keffiyeh ut helvetica工匠。羊毛衫工艺啤酒seitan准备velit。 VHS chambray laboris tempor veniam。 Anim mollit minim commodo ullamco thundercats。 < / p>< / div>
更改滚动速度，只需修改此块即可满足您的需要：
if（delta< 0）{
//向下滚动
curScroll + = 10;
}
else {
//向上滚动
curScroll - = 10;
}
只需更改 10
code> var curScroll = 0;
$（window）.on（'mousewheel DOMMouseScroll'，'body'，function（e）{
var evt = window.event || e;
var delta = evt.detail？evt.detail *（ - 120）：evt.wheelDelta;
var loc = $（'＃scrollMeToo'）。scrollTop（）+ $（'＃scrollMeToo'）。innerHeight $ b var height = $（'＃scrollMeToo'）[0] .scrollHeight - 10;
var height2 = $（'＃scrollMeToo'）[0] .scrollHeight - $（'＃scrollMeToo'）。innerHeight ）;
if（delta< 0）{
//向下滚动
if（curScroll< height2）{
curScroll + = 10;
}
}
else {
//向上滚动
if（curScroll> 0）{
curScroll - = 10;
}
}
if（loc> = height&&！$（'＃scrollMeToo'）。hasClass（'attached'））{
var moreContent ='< a href =google.com>一个链接< / a>';
$（'＃scrollMeToo'）。append（moreContent）;
$（'＃scrollMeToo'）。addClass log（'attached'）;
}
$（'＃scrollMeToo'）。scrollTop（curScroll）;
return true;
}）;
根据您的描述，此修改应适合您的需要。
内容会在达到div的底部之前出现刚刚，并且只会出现一次。
I'd like to trigger scrolling of a div with overflowing content by scrolling anywhere on the page, not just by moving the mouse and clicking within the div. Also, i'd like to hide the div's scrollbar such that only the page's scrollbar is visible.
Preferably the solution would be CSS-based but a JS solution would work too.
here's my jsfiddle that demonstrates the problem: http://jsfiddle.net/trpeters1/RMZsX/8/
I'd copy the code here but there I put a bunch of filler text to trigger the scrollbars.
For you reference though, the name of the internal div I'd like to scroll on scrolling the page has an id="scrollMeToo".
解决方案
var curScroll = 0;
$(window).bind('mousewheel DOMMouseScroll', function(e){
var evt = window.event || e;
var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
if(delta < 0) {
//scroll down
curScroll += 10;
}
else {
//scroll up
curScroll -= 10;
}
$('#scrollMeToo').scrollTop(curScroll);
return true;
});
#scrollMeToo {
height: 200px;
width:150px;
overflow: auto;
position: relative;
overflow-y: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<hr>
<div id="scrollMeToo">
<h4 id="fat">@fat</h4>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<h4 id="mdo">@mdo</h4>
<p>
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
</p>
<h4 id="one">one</h4>
<p>
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
</p>
<h4 id="two">two</h4>
<p>
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
</p>
<h4 id="three">three</h4>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</div>
This should do what you need, if you don't want the document to scroll, just change the return true; to return false;.
Non-jQuery method:
var curScroll = 0;
function controlScroll (e) {
var evt = window.event || e;
var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
if(delta < 0) {
//scroll down
curScroll += 10;
}
else {
//scroll up
curScroll -= 10;
}
document.getElementById('scrollMeToo').scrollTop = curScroll;
};
if (document.attachEvent) {//if IE (and Opera depending on user setting)
document.attachEvent("onmousewheel", controlScroll)
}
else if (document.addEventListener) { //WC3 browsers
document.addEventListener("mousewheel", controlScroll, false)
}
#scrollMeToo {
height: 200px;
width:150px;
overflow: auto;
position: relative;
overflow-y: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<hr>
<div id="scrollMeToo">
<h4 id="fat">@fat</h4>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<h4 id="mdo">@mdo</h4>
<p>
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
</p>
<h4 id="one">one</h4>
<p>
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
</p>
<h4 id="two">two</h4>
<p>
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
</p>
<h4 id="three">three</h4>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</div>
In order to change the scrolling speed, simply modify this block to suit your needs:
if(delta < 0) {
//scroll down
curScroll += 10;
}
else {
//scroll up
curScroll -= 10;
}
Just change the 10 values to whatever you need.
Update:
var curScroll = 0;
$(window).on('mousewheel DOMMouseScroll', 'body', function(e){
var evt = window.event || e;
var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
var loc = $('#scrollMeToo').scrollTop() + $('#scrollMeToo').innerHeight();
var height = $('#scrollMeToo')[0].scrollHeight - 10;
var height2 = $('#scrollMeToo')[0].scrollHeight - $('#scrollMeToo').innerHeight();
if(delta < 0) {
//scroll down
if (curScroll < height2) {
curScroll += 10;
}
}
else {
//scroll up
if (curScroll > 0) {
curScroll -= 10;
}
}
if (loc >= height && !$('#scrollMeToo').hasClass('appended')) {
var moreContent ='<a href="google.com">a link</a>';
$('#scrollMeToo').append(moreContent);
$('#scrollMeToo').addClass('appended');
console.log('appended');
}
$('#scrollMeToo').scrollTop(curScroll);
return true;
});
This modification should suit your needs, according to what you've described. I've also altered the function slightly for some general fixes.
The content will appear just before the bottom of the div is reached, and will only appear once.
这篇关于通过滚动页面上的任何位置滚动溢出的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
