Can I implement inertia scrolling like on smartphones using SDL?

Question

Ryan McCombe · Accepted Answer

Inertia scrolling, commonly found on smartphones, provides a smooth and natural scrolling experience by continuing the scroll motion after the user stops scrolling. Implementing this in SDL requires additional logic to simulate the deceleration of the scroll.

Here's how you can implement inertia scrolling in SDL:

Simulate inertia: In the event loop, increase the scroll velocity based on the mouse wheel input. Use a factor to simulate inertia by gradually decreasing the velocity over time. This creates a deceleration effect.

Update scroll position: Continuously update the scroll position based on the current velocity. This allows the scroll motion to continue smoothly even after the user stops scrolling.

Rendering: Render the content based on the current scroll position. In this example, a rectangle is rendered at the updated position to demonstrate the scrolling effect. Modify the inertia and coefficient constants to control the strength of the effect:

1#include <SDL.h>
2#include <iostream>
3#include <chrono>
4
5const float inertia = 0.999f;
6const float coefficient = 100.0f;
7
8float scrollPosition = 0.0f;
9float scrollVelocity = 0.0f;
10
11void HandleMouseWheel(SDL_MouseWheelEvent& wheel) {
12  scrollVelocity += wheel.y * coefficient; 
13}
14
15int main(int argc, char* argv[]) {
16  using namespace std::chrono;
17  SDL_Init(SDL_INIT_VIDEO);
18  SDL_Window* window = SDL_CreateWindow(
19    "Inertia Scrolling Example", 
20    SDL_WINDOWPOS_UNDEFINED, 
21    SDL_WINDOWPOS_UNDEFINED, 
22    800, 600, 
23    SDL_WINDOW_SHOWN
24  );
25  SDL_Renderer* renderer =
26    SDL_CreateRenderer(window, -1, 0);
27
28  SDL_Event event;
29  bool running = true;
30  auto lastTime = high_resolution_clock::now();
31
32  while (running) {
33    auto currentTime = high_resolution_clock::now();
34    duration<float> deltaTime =
35      currentTime - lastTime;
36    lastTime = currentTime;
37
38    while (SDL_PollEvent(&event)) {
39      if (event.type == SDL_MOUSEWHEEL) {
40        HandleMouseWheel(event.wheel);
41      }
42      if (event.type == SDL_QUIT) {
43        running = false;
44      }
45    }
46
47    scrollPosition += (
48      scrollVelocity * deltaTime.count());
49    scrollVelocity *= inertia;
50
51    SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
52    SDL_RenderClear(renderer);
53
54    SDL_SetRenderDrawColor(
55      renderer, 255, 255, 255, 255);
56
57    SDL_Rect rect = {
58      375,
59      static_cast<int>(scrollPosition),
60      50,
61      50
62    };
63
64    SDL_RenderFillRect(renderer, &rect);
65
66    SDL_RenderPresent(renderer);
67  }
68
69  SDL_DestroyRenderer(renderer);
70  SDL_DestroyWindow(window);
71  SDL_Quit();
72  return 0;
73}

Handling Mouse Scrolling

Implement Inertia Scrolling in SDL

Handling Mouse Scrolling

Game Development with SDL2

Questions & Answers