search

jnicol / trackpad-scroll-emulator

A jQuery plugin that emulates OSX trackpad-style scrollbars in any browser or platform.
MIT License
217 stars 44 forks source link

Full Page #7

Closed rd4k1 closed 11 years ago

rd4k1 commented 11 years ago

Can this be used on the body?

yohsuzuki commented 11 years ago

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.

jnicol commented 11 years ago

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.

hansvn commented 10 years ago

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)

jnicol commented 10 years ago

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

hansvn commented 10 years ago

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

jnicol commented 10 years ago

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

hansvn commented 10 years ago

@jnicol Thanks! works fine now :)

hansvn commented 10 years ago

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

jnicol commented 10 years ago

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.