CODEWITHSUNDEEP
javascripthtmlcsseffects
LuckyScooby
LuckyScooby

Reputation: 91

JavaScript edge effect

I would like to know if there is any JavaScript library to perform the same effects in smartphones when scrolling off bounds,

graphical effect used at the edges of scrollable widgets when the user scrolls beyond the content bounds in 2D space. https://developer.android.com/reference/android/widget/EdgeEffect.html

I'm searching for it over the internet but could not find anything like that yet.

Upvotes: 0

Views: 257

Answers (1)

c-smile
c-smile

Reputation: 27470

If you are looking for elastic effect ...

That kind of effect requires support of so called overscroll on DOM elements - essentially it means that you should be able to set document.body.scrollTop to negative value. But you cannot do that in standard DOM: 

$(function() {
  document.body.scrollTop = -20;
  $("#sp").html("Scroll position=" + document.body.scrollTop);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id=sp>
  Scroll position
</div>

You will need to animate document.body.scrollTop < 0 to achieve animated elastic effect.

Beside of negative scroll values it requires special type of scrollbar. Default classic scrollbars are not designed to show overscroll positions.

Ideally, in order to achieve such an effect you will need browser support.

Like in my Sciter I've introduced overlow:scroll-indicator; CSS property to support such lightweight scroll bar with animated "go back" effect. Here is a screenshot taken at the moment of overscroll (note first item is off the top of the list):

enter image description here

In principle in browsers it is possible to achieve such an effect using animated transform:translate() and custom scrollbar-ailike drawing but I haven't seen anything like that...

Upvotes: 1

Related Questions