时间戳

首页 > 解决方案 > 拖动时是否可以更改自动滚动偏移量？

javascript - 拖动时是否可以更改自动滚动偏移量？

问题描述

我有一个用 Vue.js 编写的单页应用程序。UI 包含三个主要元素：

侧边栏可使用 滚动overflow-y: auto。边栏中的一些元素，我在这里用文本指定item X，是可拖动的。

通常，当向可滚动区域的边缘拖动时，该区域将自动沿该方向滚动。在我的应用程序中，侧边栏不会自动滚动，因为上边缘被导航栏隐藏。

一个明显的解决方案是更改侧边栏的结构，使其上边缘可见，而不是一个顶部填充的 div。但是，这可能会破坏其他事情。

问题： 我想知道当鼠标任意靠近边缘时，是否有办法在拖动时触发自动滚动，例如 $navbarHeight 像素。

我正在寻找一个纯 HTML5 解决方案、vanilla js 或我当前框架（Vue.js v3）的东西。

我已经尝试过： 我已经进行了大量的谷歌搜索，但我可能使用了错误的搜索查询：“拖动时自动滚动”、“滚动敏感区域”、“自动滚动偏移”，以及几种引号组合没有产生相关结果。

JS 小提琴： https ://jsfiddle.net/7f5wh1mj/4/

页面是什么样的（请参阅小提琴以获取工作示例）：

在此处输入图像描述

标签： javascripthtmlcssvue.js

解决方案

现在，您可以使用网格来创建这样的布局，这是一个没有位置但网格的示例；）

new Vue({
  el: "#app",
  data: {
    todos: [{
        text: "Learn JavaScript",
        done: false
      },
      {
        text: "Learn Vue",
        done: false
      },
      {
        text: "Play around in JSFiddle",
        done: true
      },
      {
        text: "Build something awesome",
        done: true
      }
    ],
    items: 12
  },
  methods: {
    toggle: function(todo) {
      todo.done = !todo.done
    }
  }
})
* {
  box-sizing: border-box;
  /* reset , optionnal */
}

body {
  background: #20262E;
  font-family: Helvetica;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  /* needed */
  width: 100vw;
}

#app {
  background: #fff;
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto 1fr;
  height: 100%;
  /* do not remove */
}

.navbar {
  grid-row: 1;
  grid-column: 1 / 3;
  padding: 0.5em;
  background-color: lightgreen;
}

.sidebar {
  background-color: lightgray;
  /* z-index: 1; no need */
  overflow-y: auto;
}

.content {
  background-color: #fff;
  /*  z-index: 0; no need */
  overflow: auto;
  /* make it scroll too instead body */
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

aside p {
  text-align: center;
  color: white;
  background:gray;
  position:sticky;
  top:0;
  margin:0;
  padding:0.25em 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="navbar">
    <h1>Navbar</h1>
  </div>
  <aside class="sidebar">
    <p>Sidebar</p>
    <ul>
      <li draggable v-for="n in items">item {{ n }}</li>
    </ul>
  </aside>
  <div class="content">
    <h2>Todos:</h2>
    <ol>
      <li v-for="todo in todos">
        <label>
          <input type="checkbox" v-on:change="toggle(todo)" v-bind:checked="todo.done">

          <del v-if="todo.done">
            {{ todo.text }}
          </del>
          <span v-else>
            {{ todo.text }}
          </span>
        </label>
      </li>
    </ol>
  </div>
</div>

编辑：在侧边栏中添加评论和粘性示例。

推荐阅读