how can i stop users from dragging a page horizontally?

Question

My page has a horizontal scroll feature, and when a button is pressed the DIV containing the scrolling content animates to the left.

The width of that element is 18000px, so it has a horizontal scrollbar that I disabled.

However I could still drag my page left and right and I would like to stop users doing that. Is there a css solution to my problem? Thanks for your time

im asking how to stop people dragging the page left and right with their mouse — user2751288, Sep 05 '13 at 15:26
And there's an answer to your exact question on that thread. — Itay, Sep 05 '13 at 15:27
As the answers in that question state; cancel events that could lead to a scroll, before the scroll event, and implement a "snap to default" if a scroll somehow gets through the net. — Paul S., Sep 05 '13 at 15:29

score 0 · Accepted Answer · answered Sep 05 '13 at 15:45

I suppose using overflow:hidden on the DIV and use javascript to control the margin-left to shift left and right will do the job

Edit Add example:

<!-- The "Frame" -->
<div class="container" style="width:1024px;overflow:hidden">
  <div class="very-long-div" style="width:18000px">
     Your awesome content here
  </div>
</div>

score 0 · Answer 2 · answered Sep 05 '13 at 15:47

0

In your CSS, hide the horizontal scrollbar by doing body{overflow-x:hidden;}.

answered Sep 05 '13 at 15:47

kamoroso94

1,713
1
16
19

I can still drag by holding the left mouse key down and dragging right – user2751288 Sep 05 '13 at 16:18

how can i stop users from dragging a page horizontally?

2 Answers2

Linked