JS选项卡的滚动条问题

Scrollbar issue with JS tabs

本文关键字：滚动条 问题 选项 JS      更新时间：2023-09-26

我是javascript的新手，所以问题实际上可能在于我知道多少或如何搜索这个，但我在其他任何地方都没有发现同样的问题：

使用脚本制作一组选项卡时，它们工作正常，但每个选项卡上的滚动条将保持不变。例如，如果我转到第二个选项卡并一直向下滚动，然后单击第三个选项卡，而不是转到顶部，它将停留在底部，因为那是它在第二个选项卡上的位置。

这就是我正在使用的：http://jsfiddle.net/z7uxfbws/

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e)  {
    var currentAttrValue = jQuery(this).attr('href');
    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
    // Change/remove current tab to active
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault(e);
  });
});

如果你能解释问题是什么，如何解决它，以及它为什么有效，那绝对是美妙的。

感谢您抽出宝贵时间阅读！

滚动条位于父元素上，.tab-content .

正在操作（隐藏/显示）的元素是子元素，.tab 。

因此，父元素上的滚动条始终存在。因此，切换选项卡时，滚动条的位置不会更改。

为了解决此问题，您可以将滚动条移动到子元素而不是父元素。

更新的示例 

 .tab {
     display: none;
     overflow: auto;         /* Moved this from the parent element */
     height: 100%;
     padding: 10px;          /* This *was* on the parent element, too. */
     box-sizing: border-box; /* Include the padding in the 
                                element's width/height calculations */
 }

。或者，您也可以在每次更改选项卡时将.tab-content 的滚动条滚动到顶部。

更新的示例

$('.tab-content').scrollTop(0);
相关文章：