Giters

jnicol / trackpad-scroll-emulator

A jQuery plugin that emulates OSX trackpad-style scrollbars in any browser or platform.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Full Page

rd4k1 opened this issue · comments

commented

Can this be used on the body?

commented

You need to set up the scrolling content as documented in the README. If you can add elements to surround the content in body, then you can use this to scroll body content.

commented

That's a really good question, and to be honest I hadn't tried until now.

I've done a quick test (Webkit, FF, Safari) and it works with the following CSS:

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
.your-element {
  width: 100%;
  height: 100%;
}

Where your-element is the element containing your scrollable content, to which you're applying TrackpadScrollEmulator. In your HTML makup your-element would be the immediate child of body (i.e. the only content in the document).

I've also modified the plugin so that the scroll content and scrollbar dimensions are recalculated on window resize, which is necessary for this to work. The change should also make other responsive implementations possible.

commented

could you post the html code used in your test?

I'm using this html:

<body>
    <div id="content" class="tse-scrollable">
        <div class="tse-content horizontal">
            some content
        </div>
    </div>
</body>

and I use this jquery:

$(document).ready(function(){
    $('#content').TrackpadScrollEmulator({ autoHide: false });
});

but the scrolling just won't work... the bars aren't showing at all...
(using version 1.0.4)

commented

@hansvn I've added a fullscreen demo to the repository so you can see the CSS I'm using.

commented

@jnicol the demo works like a charm!
However, when I tried to make the page scroll horizontally, it doesn't work...

commented

@hansvn I've added a full page horizontal scrolling demo too :)

commented

@jnicol Thanks! works fine now :)

commented

It seems there is still a bug in the horzontal scroll demo...
I added an empty span tag

<span></span>

in the first box and the other boxes aren't placed as they should be.
I tested it out some more and replaced some box numbers with an empty span, so I would get

<div class="box"><span></span></div>

and each box that has an empty span (or empty tag) is placed just fine, the others are placed way too far down.
This actually happens with every 'empty' html tag, I tested a lot of them (even leaving the <div class="box"></div> empty).
Once there is content in every tag, it renders fine... (tested it on firefox and chrome, IE wouldn't work with me at all...)
fullscreen

commented

What you've described doesn't constitute a bug since the .boxes element and everything inside it are for demo purposes only, and don't form part of the plugin. It's entirely up to you what markup you put inside your scrollable element, and how you style it. It could be a bunch of inline-block elements like in my demo, or it could be something else entirely.

Having said that, if you put a non breaking space (&nbsp;) inside your empty boxes they'll render the way you expect.