给定一个行高和任何边距n的区域,并且该区域的高度是倍数n,并且scrollTop增加了n我的倍数,我发现我得到了我在Firefox,Opera和NetFront中得到的结果,但是Chrome(Windows),Safari(Mac)和最新的WebKit每晚(Mac)有一些泄漏,我看到部分线条.
在我的实际项目中(我无法分享)效果非常明显,但即使在简化的测试用例中,也可以看到上一行的底部在框顶部突出显示.
有可能避免这种影响吗?这是WebKit渲染引擎中应该报告的错误吗?
简化的测试用例可以在下面看到,并作为我网站上的实例.单击文档几次以滚动它而不是框顶部的点(这是前一行字母的底部).
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>scrollTop issue</title>
<style>
body {
background-color: white;
color: black;
}
#wrapper {
width: 300px;
font-size: 19px;
font-family: sans-serif;
line-height: 21px;
height: 210px; /* A multiple of line height */
overflow: hidden;
}
#wrapper * {
margin: 0;
padding: 0;
}
#wrapper p {
margin-bottom: 21px; /* Same as line height */
}
</style>
<script>
window.addEventListener('click', function () {
document.getElementById('wrapper').scrollTop += 210; …Run Code Online (Sandbox Code Playgroud) 我有一个硬编码高度的滚动容器:
.scrollingContainer {
overflow: scroll;
height: 400px;
}
Run Code Online (Sandbox Code Playgroud)
这个滚动容器包含一个项目列表,当我点击我要滚动容器的项目时,单击的项目位于滚动容器的顶部.
$('.scrollingContainer li a').click( function(event) {
var vpHeight = $('.scrollingContainer').height();
var offset = $(this).offset();
$('.scrollingContainer').animate({
scrollTop: vpHeight - offset.top
}, 500);
});
Run Code Online (Sandbox Code Playgroud)
以上是我目前的情况,我在进行数学计算时遇到问题.另外我认为var offset值是不正确的,因为它似乎是从页面顶部获得偏移量,我希望根据它在滚动容器中的位置获得偏移值.
任何帮助赞赏!
我有一个高度div:100px和overflow:auto内容是动态的.
我想滚动底部的div
我试过了
$("#chat_content").scrollTop($("#chat_content").height());
Run Code Online (Sandbox Code Playgroud)
但如果内容大于100px $("#chat_content").height()返回100并且div不在底部滚动
我能怎么做?
谢谢
例如,我有一个带有div标签右侧滚动条的div标签.
我想用最后一行显示div,所以我有这个:
document.getElementById("divscroll").scrollTop = 250000;
Run Code Online (Sandbox Code Playgroud)
我可以让它滚动到Firefox的最后但是从未成功使用更大数量的IE事件!
有没有简单的Cross-borwser脚本(不是JQuery或任何大框架!)
我section在div中有很多标签,溢出设置为hidden.代码是这样的:
<div id="viewport">
<section>
content
</section>
<section>
content
</section>
</div>
Run Code Online (Sandbox Code Playgroud)
我把它设置为这样,因为我希望能够在菜单中按下相应链接时滚动浏览sections包含内容div.我有这个功能:
$('#mn a').click(function(){
var aHref = $(this).attr("href");
var sectionHeight = $('section'+aHref+'').height();
$('#viewport').height(sectionHeight);
});
Run Code Online (Sandbox Code Playgroud)
我用它来调整#viewportdiv的大小,因为sections它们的大小不同.当我尝试将此滚动部分放入该函数时:
$('body,html').animate({scrollTop: $(aHref).offset().top}, 800);
Run Code Online (Sandbox Code Playgroud)
它使整个页面滚动.当我尝试$('body,html')用$('section, #viewport')它替换它时,在div内部滚动,但它没有正确地执行.
我在这里有一个实例.我认为这与.offset()我传入的内容有什么关系.animate(),但是我尝试了很多不同的东西,但无济于事.有人可以指出我正确的方向或告诉我我做错了什么?
我正在制作一些插件,我需要获得scrollTop文档的最大价值.最大值scrollTop是2001,但$(document).height()返回2668并$('body')[0].scrollHeight给我undefined.
如何2001通过javascript/jquery?!
我正在使用此链接:
<a class="" onclick="location.href='#top'" href="superContent">superContent</a>
Run Code Online (Sandbox Code Playgroud)
它同时做两件事:
一切都很好,除了我试图弄清楚如何让它更顺畅地滚动到顶部.我已经尝试添加.scroll将它附加到我的jquery scrollTo插件,但没有任何反应,这可能与我正在使用javascript onclick这一事实有关,而href属性完全做了其他事情.
有没有办法将动画平滑滚动附加到onclick ="location.href ='#top'"?
我花了最后一小时阅读关于缩放的各种问题以及.scrollTop()处理的变化,并尝试了至少20种不同的东西 - 一切看起来甚至可以用于我的情况,我仍然只有部分解决方案.
我有一个表单,有三个字段和一个按钮继续.继续按钮打开表单的其余部分.当您选择文本字段时,Safari移动设备会放大.我特别不介意.如果我阻止缩放,那么它可能太小而无法读取字段,如果我以可读缩放级别加载,那么您只能看到页面的一部分,因此放大行为是可以的.
情况是,在单击按钮并且窗体的另一半显示之后,窗口仍然会放大,并且您正在查看页面的随机补丁.
从我可以想象的可以有两个处理:
1)实际上在单击按钮后缩小
2)滚动到表单的下一部分显示的位置
我试着缩小和处理一切,我能找到viewport content width的meta标签不火,但不处理它为我,它只是使视口变大或小,实际上并没有缩小的.这可能对其他人有用,但不适合我,因为我已经有很多样式可能使这不是一个选择.
我已经确定了滚动解决方案并且.scrollLeft()工作正常,但.scrollTop()无论我选择哪个选择器都无关紧要.我试过了:
$('body').scrollTop
$('html').scrollTop
$('document').scrollTop
$('body,html,document').scrollTop
$('html:not(:animated),body:not(:animated)').scrollTop
$('html:not(:animated),body:not(:animated),document:not(:animated)').scrollTop
$('#content').scrollTop // that's a wrapper div
$(window).scrollTop
Run Code Online (Sandbox Code Playgroud)
有人知道如何.scrollTop()在Safari Mobile上工作吗?
我有一个div class ='messages'.我通过jQuery.append()向这个div添加日期以下是样式:
.messages {
border: 1px solid #dddddd;
padding:10px;
height: 400px;
overflow-x:visible;
overflow-y: scroll;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom:10px;
font-size:14px;
}
Run Code Online (Sandbox Code Playgroud)
对于autoscroll我使用这样的功能:
receiveMessage = function (name, message, type) {
//adding new message
$("#messages").append('<strong>' + name + ": " + '</strong>' + message + '<br>');
/autoscrolling to the bottom
$("#messages").animate({
scrollTop: $("#messages").height()
}, 300);
}
Run Code Online (Sandbox Code Playgroud)
大约有20条消息正常滚动,但在"挂起"后,新消息不会滚动.Chrome版本19.0.1084.56.我做错了什么?谢谢!
这里是一个真正的JQuery UI天才:我们有一个非常长的形式,按需加载部分(例如,当点击索引/导航时,或当我们在当前部分的边缘滚动时).
当我在当前查看的部分下面加载部分时,这不会影响当前滚动(即scrollTop)位置,但是当我在当前查看部分上方插入新部分时,它当然会将查看的内容推下来.
我们需要保持相对于当前部分的scrollTop位置.我们还需要在进行调整时避免显示跳跃/毛刺.
我想要任何实际上必须解决这个问题的人提出一些建议.重要的是屏幕不会出现故障,因此应避免将scrollTop同步到缓慢的DOM更新.
对拟议解决方案的建议或意见?是否有可以执行此操作的滚动替换?
如果你无法解决它,但认为它值得解决,请考虑提升,这样我就可以获得大笔奖金!:)