Can the autoscroll offset be adjusted while dragging?

Question

Can the autoscroll offset be adjusted while dragging?

I am developing a single-page application using Vue.js. The user interface consists of three main components:

A fixed navbar at the top with a z-index of 2
A fixed sidebar on the left with a z-index of 1, and padding to accommodate the navbar
A central area with padding to account for the other fixed elements.

The sidebar is scrollable with overflow-y: auto. Certain items within the sidebar, referred to as "item X" here, are draggable.

Typically, when moving towards the edges of a scrollable area while dragging, the area will automatically scroll in that direction. However, in my app, the sidebar does not autoscroll because its upper edge is covered by the navbar.

One solution could involve restructuring the sidebar so that its upper edge is visible instead of being hidden beneath a padded div. However, this approach may have unintended consequences.

Question: I would like to explore methods for triggering auto-scroll during drag when the mouse is close to the edge, perhaps within $navbarHeight pixels.

I am seeking a solution that is pure HTML5, vanilla JavaScript, or compatible with my current framework (Vue.js v3).

What I have attempted: Despite extensive research, keywords such as "auto scroll while dragging," "scroll sensitivity area," and "autoscroll offset" have not provided relevant insights.

JS Fiddle: https://jsfiddle.net/7f5wh1mj/4/

Visual Representation: Please refer to the fiddle for a live demonstration.

javascript html css vue.js

Answer 1

Answer №1

In today's world, grid layouts can be used to create unique designs. Here is an example that demonstrates how to achieve a layout using grid without relying on position properties.

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;
}

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

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

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

.sidebar {
  background-color: lightgray;
  overflow-y: auto;
}

.content {
  background-color: #fff;
  overflow: auto;
}

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>

edit: A comment has been added along with an example of using the sticky position within the sidebar.

Answer 2

In today's world, grid layouts can be used to create unique designs. Here is an example that demonstrates how to achieve a layout using grid without relying on position properties.

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;
}

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

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

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

.sidebar {
  background-color: lightgray;
  overflow-y: auto;
}

.content {
  background-color: #fff;
  overflow: auto;
}

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>

edit: A comment has been added along with an example of using the sticky position within the sidebar.

Can the autoscroll offset be adjusted while dragging?

Answer №1

Similar questions

Using Javascript to Treat an HTML Document as a String

Having trouble reaching the vue binary through my command line interface

My goal is to create collapsible and expandable rows within this table

Can a CSS hover effect transition modify the color scheme?

Trouble with variable in require path causing issues with r.js

Quasar - q-scroll-area : Allow child to fill the available space

Overlay with a progress bar that obscures visibility

The HTML element in the side menu is not adjusting its size to fit the parent content

What is the best way to utilize images stored in the public directory rather than the assets folder within my Vue application?

Encrypting data using JavaScript and then decrypting it with Ruby

Create a series of canvas lines connecting all divs that share a common class identifier

Error encountered in AngularJS and JSON server: [$injector:unpr] An unidentified provider was found: $resourceProvider <- $resource <- menuFactory

Leveraging the reset function with the $meteor.object

Issue with Typescript and react-create-app integration using Express

Enhancing the mobile menu with a feature that allows users to easily close the

Executing Python code through a website using PHP - is there a way to deactivate the button once it has been clicked?

How to customize the button color in a Next.js application

Extracting public data from social media profiles as displayed in Smartr

Uploading base64 arrays from AngularJS to a Node.js server: Allowing Access-Control-Origin

Utilize Sass @extend to incorporate imported CSS files in the build process