在 DIV 中实现拖动滚动功能

场景描述
假设你有一个带有滚动条的div容器，你希望用户可以通过拖动鼠标来滚动内容，而不是直接滚动滚动条。这种功能特别适合流程图、地图或其他需要精细控制滚动的场景。

实现步骤

• 创建 HTML 结构
  在你的 WordPress 页面或文章中，插入一个带有滚动条的div容器。例如：

   <div id="scrollableDiv" class="scrollable-container">
       <div class="content">
           <!-- 这里放置你的内容 -->
           <p>这里是滚动内容的一部分。</p>
           <p>更多内容...</p>
       </div>
   </div>

插入这段代码。

• 添加 CSS 样式
  在你的主题的style.css文件中，或者通过 WordPress 的自定义 CSS 功能，添加以下样式：

   .scrollable-container {
       width: 400px;
       height: 300px;
       border: 1px solid #ccc;
       overflow: auto;
       position: relative;
       cursor: grab;
   }
   .content {
       width: 800px;
       height: 600px;
       background: linear-gradient(to right, red, blue);
   }

这些样式定义了容器的大小、边框和滚动条的显示。

• 添加 JavaScript 代码
  在你的主题的functions.php文件中，或者通过 WordPress 的自定义脚本功能，添加以下 JavaScript 代码：

   <script>
       document.addEventListener('DOMContentLoaded', function () {
           const scrollableDiv = document.getElementById('scrollableDiv');

           let isDragging = false;
           let startX, startY, startScrollLeft, startScrollTop;

           // 鼠标按下事件
           scrollableDiv.addEventListener('mousedown', function (e) {
               if (e.button === 0) { // 鼠标左键
                   isDragging = true;
                   startX = e.clientX;
                   startY = e.clientY;
                   startScrollLeft = scrollableDiv.scrollLeft;
                   startScrollTop = scrollableDiv.scrollTop;
                   scrollableDiv.style.cursor = 'grabbing'; // 改变光标样式
               }
           });

           // 鼠标移动事件
           document.addEventListener('mousemove', function (e) {
               if (isDragging) {
                   const deltaX = startX - e.clientX;
                   const deltaY = startY - e.clientY;
                   scrollableDiv.scrollLeft = startScrollLeft + deltaX;
                   scrollableDiv.scrollTop = startScrollTop + deltaY;
               }
           });

           // 鼠标释放事件
           document.addEventListener('mouseup', function () {
               if (isDragging) {
                   isDragging = false;
                   scrollableDiv.style.cursor = 'grab'; // 恢复光标样式
               }
           });
       });
   </script>

这段代码通过监听鼠标事件来实现拖动滚动功能。

• 测试功能
  将上述代码添加到你的网页后，保存并查看效果。你可以通过拖动鼠标来滚动内容，而无需直接操作滚动条。

注意事项

• 确保你的主题支持自定义 CSS 和 JavaScript。
• 如果你的页面中有多个滚动容器，可以通过类名选择器来区分它们。
• 如果你需要更复杂的功能，比如平滑滚动或限制滚动范围，可以通过进一步扩展 JavaScript 代码来实现。