将“active”类添加到PanelSnap面板

<link rel="stylesheet" href="path/to/panelsnap.css">
<script src="path/to/panelsnap.js"></script>

<div id="panelsnap-container">
  <!-- 页面内容 -->
</div>

document.addEventListener('DOMContentLoaded', function() {
  var container = document.getElementById('panelsnap-container');
  var panelsnap = new PanelSnap(container, {
    panelSelector: 'section', // 面板选择器，根据实际情况修改
    onSnapStart: function() {
      // 在面板切换开始时执行的回调函数
    },
    onSnapFinish: function() {
      // 在面板切换完成时执行的回调函数
    }
  });

  // 获取所有面板元素
  var panels = container.querySelectorAll('section');

  // 遍历面板元素，为当前面板添加“active”类
  panels.forEach(function(panel) {
    panel.addEventListener('panelsnap:activate', function() {
      panel.classList.add('active');
    });

    panel.addEventListener('panelsnap:deactivate', function() {
      panel.classList.remove('active');
    });
  });
});