Question

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

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

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);
  });
});

如果您能解释问题是什么，如何修复，以及它为何起作用，那将是绝对精彩的。

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

Answer 1

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

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

因此父元素上的滚动条始终存在。因此，当切换标签时，滚动条的位置不会改变。

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

Updated Example

 .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的滚动条滚动到顶部。

Updated Example

$('.tab-content').scrollTop(0);

JS选项卡的滚动条问题

1 个答案: