滚动-单击后无法滚动固定侧边栏中的自定义滚动

时间:2018-08-10 05:43:57

标签: jquery css scroll fixed mcustomscrollbar

我做了一个固定的侧边栏,并应用了自定义滚动条(iemcustomscrollbar),但是我希望单击锚标签(在手风琴内)时要在侧边栏顶部滚动手风琴,为此如果侧边栏不粘时将正文或html滚动到单击的元素顶部位置,则使用与我使用的相同代码。

我做错了什么?

不粘

如果边栏不粘,这是代码

$('.card > .collapse').on('shown.bs.collapse', function(e){
    e.preventDefault();  
    e.stopPropagation();
  console.log('click');

  var scrollToCategory = $(this).parent().offset().top;


  var body = $("html, body");
  body.stop().animate({scrollTop:scrollToCategory}, 500, 'swing', function() { 
     // alert("Finished animating");
  });

})

STICKY

如果边栏为粘性,则为以下代码

$('.card > .collapse').on('shown.bs.collapse', function(e){
    e.preventDefault();  
    e.stopPropagation();
  console.log('click');

  var scrollToCategory = $(this).parent().offset().top;


  var body = $("#sidebar-wrapper");
  body.stop().animate({scrollTop:scrollToCategory}, 500, 'swing', function() { 
     // alert("Finished animating");
  });

})

这是jsfiddle链接

Non sticky

Sticky

注意:粘性示例在jsfiddle中似乎不起作用,请将该示例复制并粘贴到另一个自定义文件中:)

1 个答案:

答案 0 :(得分:0)

最后

经过大量搜索,我做到了。它只是m.custom滚动条

中的一部分代码

这是解决方案:

$('.card > .collapse').on('shown.bs.collapse', function(e){

   e.preventDefault();
   e.stopPropagation();

   var childPos = $(this).parent().offset();
   var parentPos = $('#sidebar').offset();
   var childOffset = {
       top: childPos.top - parentPos.top,
       left: childPos.left - parentPos.left
   }

   $("#sidebar-wrapper").mCustomScrollbar('scrollTo', '-='+childOffset.top);
});