# Click and Drag to Scroll

**URL:** https://discourse.processing.org/t/click-and-drag-to-scroll/22768
**Category:** Coding Questions
**Created:** [July 21, 2020, 9:23pm UTC](https://discourse.processing.org/t/click-and-drag-to-scroll/22768 "2020-07-21T21:23:54Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Hepyrian](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Hepyrian](https://discourse.processing.org/u/Hepyrian)
#### Post date: [July 21, 2020, 9:23pm UTC](https://discourse.processing.org/t/click-and-drag-to-scroll/22768/1 "2020-07-21T21:23:54Z")

</div>

Hey everyone,

I’m working on a piece of software that’s mostly being designed for touch screens. You know how on a touch screen you scoll by touching and dragging? I am trying to implement that functionality into my program using a scrollbar class I found, but I cannot quite figure it out. Below is the class attached. If you guys have any ideas of how to scroll in this more naturalistic way (rather than have the bar hop around to wherever you touch) that would be great!

Thanks Folks!

ScrollBar Class

```auto
// Horizontal Scroll Bar class from REAS at https://editor.p5js.org/REAS/sketches/B1_KaBccg 

//added mouse boolean that determines if we are in a touch mode or a mouse mode (desktop or touch screen)
function HScrollbar(xp, yp, sw, sh, l, mouse) {
  this.swidth = sw; // width and height of bar
  this.sheight = sh;
  var widthtoheight = sw - sh;
  this.ratio = sw / widthtoheight;
  this.xpos = xp; // x and y position of bar
  this.ypos = yp - this.sheight / 2;
  this.spos = this.xpos + this.swidth / 2 - this.sheight / 2; // x position of slider
  this.newspos = this.spos;
  this.sposMin = this.xpos - 100; // max and min values of slider
  this.sposMax = this.xpos + this.swidth +600;
  this.loose = l; // how loose/heavy
  this.over = false; // is the mouse over the slider?
  this.locked = false;

  this.update = function() {
    if (this.overEvent()) {
      this.over = true;
    } else {
      this.over = false;
    }
    if ((mouseIsPressed && this.over) || (touching == true && this.over)) {
      this.locked = true;
    }
    if (mouse){
      if (!mouseIsPressed) {
        this.locked = false;
      } 
    } else {
     if (touching == false){
       this.locked = false;
     }
    }
    if (this.locked) {
      this.newspos = constrain(mouseX - this.sheight / 2, this.sposMin, this.sposMax);
    }
    if (abs(this.newspos - this.spos) > 1) {
      this.spos = this.spos + (this.newspos - this.spos) / this.loose;
     
    }
  }

  this.constrain = function(val, minv, maxv) {
    return min(max(val, minv), maxv);
  }

  this.overEvent = function() {
    if (mouseX > this.xpos && mouseX < this.xpos + this.swidth &&
      mouseY > this.ypos && mouseY < this.ypos + this.sheight) {
      return true;
    } else {
      return false;
    }
    
     if (touchX > this.xpos && touchX < this.xpos + this.swidth &&
      touchY > this.ypos && touchY < this.ypos + this.sheight) {
      return true;
    } else {
      return false;
    }
  }

  this.display = function() {
    noStroke();
    fill(204, 50);
    rect(this.xpos, this.ypos, this.swidth, this.sheight);
    if (this.over || this.locked) {
      fill(0, 0, 0, 50);
    } else {
      fill(102, 102, 102, 50);
    }
    rect(this.spos, this.ypos, this.sheight, this.sheight);
  }

  this.getPos = function() {
    // Convert spos to be values between
    // 0 and the total width of the scrollbar
    return this.spos * this.ratio;
  }
}

```

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

---

<div class="post-metadata">

### Author: ![Hepyrian](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Hepyrian](https://discourse.processing.org/u/Hepyrian)
#### Post date: [July 22, 2020, 6:51pm UTC](https://discourse.processing.org/t/click-and-drag-to-scroll/22768/2 "2020-07-22T18:51:27Z")

</div>

I found a solution on my own! Turns out, you can just use the simple way in which people have figured out how to pan an image, and plug that into your x values or y values and get scrolling easily. Here is the code that I adapted: `//Zoom/Pan Component  
//by Rick Companje, Nov 1, 2018.  
//Enjoy!

var img;  
var w, h, tow, toh;  
var x, y, tox, toy;  
var zoom = .01; //zoom step per mouse tick

function preload() {  
img = loadImage(“[https://i.imgur.com/9dbblSn.jpg](https://i.imgur.com/9dbblSn.jpg)”);  
}

function setup() {  
createCanvas(windowWidth, windowHeight);  
w = tow = img.width;  
h = toh = img.height;  
x = tox = w / 2;  
y = toy = h / 2;  
}

function draw() {  
background(0);

//tween/smooth motion  
x = lerp(x, tox, .1);  
y = lerp(y, toy, .1);  
w = lerp(w, tow, .1);  
h = lerp(h, toh, .1);

image(img, x-w/2, y-h/2, w, h);  
}

function mouseDragged() {  
tox += mouseX-pmouseX;  
toy += mouseY-pmouseY;  
}

function mouseWheel(event) {  
var e = -event.delta;

if (e\>0) { //zoom in  
for (var i=0; i\<e; i++) {  
if (tow\>30\*width) return; //max zoom  
tox -= zoom \* (mouseX - tox);  
toy -= zoom \* (mouseY - toy);  
tow \*= zoom+1;  
toh \*= zoom+1;  
}  
}

if (e\<0) { //zoom out  
for (var i=0; i\<-e; i++) {  
if (tow\<width) return; //min zoom  
tox += zoom/(zoom+1) \* (mouseX - tox);  
toy += zoom/(zoom+1) \* (mouseY - toy);  
toh /= zoom+1;  
tow /= zoom+1;  
}  
}  
}`