gpt4 book ai didi

javascript - 我怎样才能制作一个像窗口滚动控制系统一样的 friend 圈?

转载 作者:行者123 更新时间:2023-11-30 06:49:36 26 4
gpt4 key购买 nike

当你激活实时更新时,新条目动态添加一个div。在这个阶段滚动是自动移动的。此操作提供您不会错过可见区域的内容。

如果你想看这个 Action ,你也可以看这个截屏视频; http://www.viddler.com/explore/itod/videos/45/

我的方法;

    // Firstly, i am storing the first entry's(in view) positions in window object;
jQuery(window).scroll(function() {
var q = 0;
jQuery(".entry").each(function (i) {
if (jQuery(this).offset().top > jQuery(window).scrollTop()) {
if (q == 0) {
window.show_id = jQuery(this).attr("id");
window.pos_y = jQuery(this).offset().top - jQuery(window).scrollTop();
q = 1;
}
}
});
});

// After coming to the new entry, i call this function;
function scroll_control() {
var scroll_top = jQuery(window).scrollTop();
if (scroll_top != 0) {
if (jQuery('#'+window.show_id).length != 0) {
var scr = jQuery('#'+window.show_id).offset().top - window.pos_y;
window.scrollTo(0, scr);
}
}
}

// but this is due to flashing. I guess not fast enough

最佳答案

我假设您希望平滑地滚动到顶部而不是跳转以解决“闪烁”问题。我会做这样的事情:

function scroll_control() {
var scroll_top = jQuery(window).scrollTop();
if (scroll_top != 0) {
if (jQuery('#'+window.show_id).length != 0) {
var scr = jQuery('#'+window.show_id).offset().top - window.pos_y;
// Instead of jumping to src use jQuery animate
// window.scrollTo(0, scr);
var scrollElem = scrollableElement('html', 'body');
$(scrollElem).animate({scrollTop: scr}, 400);
}
}
}

/*
* Use the first element that is "scrollable" (cross-browser fix?)
* http://css-tricks.com/snippets/jquery/smooth-scrolling/
*/
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}

关于javascript - 我怎样才能制作一个像窗口滚动控制系统一样的 friend 圈?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1960899/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com