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

Posted 2023-05-09

【中文标题】滚动 - 单击时无法滚动固定侧边栏中的自定义滚动

【英文标题】：Scroll - On click not able to scroll the custom scroll inside fixed sidebar

【发布时间】：2019-01-17 16:02:29

【问题描述】：

我制作了一个固定的侧边栏并应用了自定义滚动条 (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");
  );

)

粘性

如果侧边栏是粘性的，这里是代码

$('.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

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

【参考方案1】：

最后，

经过大量搜索，我成功了。它只是 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);
);