标签: scrolltop

WebKit有剪辑错误吗?

给定一个行高和任何边距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)

html javascript css webkit scrolltop

19
推荐指数
1
解决办法
1225
查看次数

将元素滚动到可滚动容器中的视图中

我有一个硬编码高度的滚动容器:

.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值是不正确的,因为它似乎是从页面顶部获得偏移量,我希望根据它在滚动容器中的位置获得偏移值.

任何帮助赞赏!

jquery scrolltop

17
推荐指数
2
解决办法
2万
查看次数

获取具有溢出的div的高度:auto;

我有一个高度div:100px和overflow:auto内容是动态的.

我想滚动底部的div

我试过了

$("#chat_content").scrollTop($("#chat_content").height());
Run Code Online (Sandbox Code Playgroud)

但如果内容大于100px $("#chat_content").height()返回100并且div不在底部滚动

我能怎么做?

谢谢

jquery height scrolltop

15
推荐指数
2
解决办法
2万
查看次数

用于设置元素的ScrollTop的跨浏览器方法?

例如,我有一个带有div标签右侧滚动条的div标签.
我想用最后一行显示div,所以我有这个:

document.getElementById("divscroll").scrollTop = 250000;
Run Code Online (Sandbox Code Playgroud)

我可以让它滚动到Firefox的最后但是从未成功使用更大数量的IE事件!
有没有简单的Cross-borwser脚本(不是JQuery或任何大框架!)

javascript scrolltop

15
推荐指数
2
解决办法
3万
查看次数

jQuery动画scrollTop

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(),但是我尝试了很多不同的东西,但无济于事.有人可以指出我正确的方向或告诉我我做错了什么?

javascript jquery animation scrolltop

15
推荐指数
2
解决办法
3万
查看次数

如何获得最大文档滚动值

我正在制作一些插件,我需要获得scrollTop文档的最大价值.最大值scrollTop2001,但$(document).height()返回2668$('body')[0].scrollHeight给我undefined.

如何2001通过javascript/jquery?!

javascript jquery scrolltop

15
推荐指数
1
解决办法
4万
查看次数

单击javascript顺畅滚动

我正在使用此链接:

<a class="" onclick="location.href='#top'" href="superContent">superContent</a>
Run Code Online (Sandbox Code Playgroud)

它同时做两件事:

  1. 将用户跳转到页面顶部
  2. 执行另一个(不相关的)ajax加载功能

一切都很好,除了我试图弄清楚如何让它更顺畅地滚动到顶部.我已经尝试添加.scroll将它附加到我的jquery scrollTo插件,但没有任何反应,这可能与我正在使用javascript onclick这一事实有关,而href属性完全做了其他事情.

有没有办法将动画平滑滚动附加到onclick ="location.href ='#top'"?

javascript scrolltop

15
推荐指数
2
解决办法
7万
查看次数

移动Safari中的scrollTop无法正常运行

我花了最后一小时阅读关于缩放的各种问题以及.scrollTop()处理的变化,并尝试了至少20种不同的东西 - 一切看起来甚至可以用于我的情况,我仍然只有部分解决方案.

我有一个表单,有三个字段和一个按钮继续.继续按钮打开表单的其余部分.当您选择文本字段时,Safari移动设备会放大.我特别不介意.如果我阻止缩放,那么它可能太小而无法读取字段,如果我以可读缩放级别加载,那么您只能看到页面的一部分,因此放大行为是可以的.

情况是,在单击按钮并且窗体的另一半显示之后,窗口仍然会放大,并且您正在查看页面的随机补丁.

从我可以想象的可以有两个处理:
1)实际上在单击按钮后缩小
2)滚动到表单的下一部分显示的位置

我试着缩小和处理一切,我能找到viewport content widthmeta标签不火,但不处理它为我,它只是使视口变大或小,实际上并没有缩小的.这可能对其他人有用,但不适合我,因为我已经有很多样式可能使这不是一个选择.

我已经确定了滚动解决方案并且.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上工作吗?

jquery mobile-safari scrolltop

15
推荐指数
1
解决办法
5801
查看次数

添加后,使用jQuery自动滚动div到底部

我有一个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.我做错了什么?谢谢!

javascript css jquery scroll scrolltop

13
推荐指数
1
解决办法
2万
查看次数

在当前查看元素上方插入新部分时保持scrollTop(无毛刺)

这里是一个真正的JQuery UI天才:我们有一个非常长的形式,按需加载部分(例如,当点击索引/导航时,或当我们在当前部分的边缘滚动时).

当我在当前查看的部分下面加载部分时,这不会影响当前滚动(即scrollTop)位置,但是当我在当前查看部分上方插入新部分时,它当然会将查看的内容推下来.

我们需要保持相对于当前部分的scrollTop位置.我们还需要在进行调整时避免显示跳跃/毛刺.

我们正在考虑的选项:

  1. 加载内容并按加载项的高度调整scrollTop位置(这可能会因为DOM更改可能比scrollTop调整慢得多而出现故障).
  2. 在屏幕外加载新部分,测量高度.然后插入该部分并按该量调整scrollTop(由于DOM更新,可能仍然是故障).
  3. 将要加载的部分设置为较大的固定高度(例如100/1000像素)并调整scrollTop以匹配,以便当前视图不会移动.将内容加载到该部分,然后测量实际的新内容高度并删除固定高度,同时调整scrollTop以匹配实际高度.
  4. 不要使用传统的滚动,而是编写一个自定义滚动条,它保持自己的相对偏移并将现有的部分分开以适应新的部分.然后问题就是编写自定义滚动条替换(对于像我们正在使用的nicescroll这样的东西).
  5. 暂时将当前查看的部分的位置更改为绝对(从屏幕偏移计算的位置),以将其从流程中取出.更新其后面的父滚动窗口内容,然后在重新计算新的scrollTop后再次使查看的部分相对.
  6. 还有什么我们还没有想过的?

我想要任何实际上必须解决这个问题的人提出一些建议.重要的是屏幕不会出现故障,因此应避免将scrollTop同步到缓慢的DOM更新.

对拟议解决方案的建议或意见?是否有可以执行此操作的滚动替换?

如果你无法解决它,但认为它值得解决,请考虑提升,这样我就可以获得大笔奖金!:)

forms jquery scroll dynamic-loading scrolltop

13
推荐指数
1
解决办法
1670
查看次数