滚动条中的中心缩略图（jQuery）

Posted 2023-03-05

【中文标题】滚动条中的中心缩略图（jQuery）

【英文标题】：centre thumbnail in scrollbar (jQuery)

【发布时间】：2011-01-01 19:25:46

【问题描述】：

请查看此页面：http://onomadesign.com/wordpress/identity-design/hans-appenzeller/

右侧的缩略图链接到不同的投资组合项目（Wordpress 单个帖子）。当用户进入页面时，我希望活动项目的缩略图在滚动条中垂直居中。现在，它重置了滚动条，所以人们看不到导航。如何使用 jQuery 实现这一点？

谢谢。

【参考方案1】：

首先将“selected”类添加到当前链接的 li 并使用该类添加您的边距而不是内联 css

看起来您正在使用jScrollPlane Plugin。这会让你用你当前的代码做这样的事情。

$('.jScrollPaneContainer').scrollTo('.currentthumb');

查看此page for the jScrollPlane scrollTo 功能

【讨论】：

谢谢。但我收到此错误：错误：o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] 不是函数源文件：onomadesign.com/wordpress/wp-content/plugins/… 行：19

移除 easing: 'elasout'。它是包含在不同文件中的更精美的动画。

我删除了它，但仍然没有滚动。我尝试了所有不同的选择器，我在这里做错了什么？谢谢

我更新了我的答案，不需要其他插件，没有看到你有 jScrollPlane 插件。它已经有一个 scrollTo 功能。似乎您将选定的类添加到每个 li 元素，而不仅仅是当时真正选择的类。

有效！！！非常感谢！现在我将尝试像您之前建议的那样为其添加一个不错的缓动效果:)

【参考方案2】：

试试这个并报告发生了什么，我自己无法测试：

$(function() 
    // Get the link that points to the current page
    var $active_link = $('a[href=\''+window.location.href+'\']');        
    // Get the scroll pane that the link is in
    var $scroll_pane = $active_link.closest('#scroll-pane');

    // Get the position where we should scroll
    var scrolltop = $active_link.offset().top - $(window).height() / 2;
    // Scroll amount must be at least 0
    scrolltop = scrolltop < 0 ? 0 : scrolltop;

    // Scroll the scrollpane so that the link sits at the middle
    $scroll_pane.scrollTop(scrolltop);
);

请注意，这需要一些改进，但首先您必须确认这适用于您的情况 - 我只是根据 jScrollPane 的文档猜测滚动窗格部分。

【讨论】：

错误：window.height 不是函数源文件：onomadesign.com/wordpress/identity-design/… Line: 161

是的，那应该是一个 jQuery 对象（$(window) 而不是window）。固定的。希望不再有错误:)

没有错误了。但仍然无法正常工作。您如何看待 petersendidit 的解决方案？

它应该可以工作，但 scrollTo 插件是可选的，它应该像我的版本一样正常工作。我猜问题出在“人造”可滚动 div 中，它不能与 scrollTop 一起正常工作。我必须考虑一段时间，如果我能够先自己测试一下，我会更新我的答案。

你有什么新发现吗？

【参考方案3】：

我发现 jScrollPane 插件有一个自己的 ScrollTo 功能：http://www.kelvinluck.com/assets/jquery/jScrollPane/scrollTo.html。即使使用 jQuery 选择器（在底部）。

我设法为当前的缩略图赋予了一个类，称为“currentthumb”。

现在我只需要让 ScrollTo 函数在页面加载时发生，而不是在点击事件时发生，对吧？这看起来更容易，不是吗？

谢谢。