Dedicated Section on Page that you can scroll down separate to whole page ?

Hi Michael,

I have still no luck with this as yet, I have had a good luck at the link you sent me and that more than what I'm after really just practically need a scrollable background image in relative terms. Its basically the function of the notifications drop down on the treeehouse site only mine will be one image scrolling up and down.. Hopefully these guy will get back to us as my search is clearly showing a need for js ....

Craig

Hi Craig,

Check out this community on facebook https://www.facebook.com/groups/designcode/ I don't know if you need to buy his book in order to join the group but you can give it a try, I'll bet someone from there can help you out. Let me know how it goes.

Michael

Out of curiosity, what are you working on?

I am wanting to show animated and and interactive preview of a mobile site within a specific area of the page wrapped in an image of an iPhone ...

So when the user hovers over then can scroll up and down the device mock up as they would there mobile and interact with it.

Hopefully then expanding to an Ipad or even being able to rotate the device to see how the site responds ...

It is for my personal webpage for the link on the original post DigiMouse....

We might not believe how simple this was!! (ignoring the svg code).....

Absolute Positioning of a div, at a set width and height, positioned over the mobile device....

In that div stick your dummy content.......(mobile width)

To that dummy content wrapper add property "overflow-y" with value "scroll".....

To keep it looking like a mobile so no scroll bar add the following code.....

.dummy-content-wrapper::-webkit-scrollbar {
    display: none;
}

Please take a look on codepen !!

I really cant believe it was this simple after a good think about what i was actually doing shows my learning has a long way to yet ......

Anyway hope this is of some interest ..

Craig

Hi Michael..

I did say id keep you posted so here is the new version of what will be a responsive demo on my site!

Link

I used iframe tag so that the site embedded is live save lots of code :) This is still yet to be tested in IE and Firefox but the concept is there haha works great in chrome :)

Craig

Hi Michael,

Thanks for your reply, I like your idea of using a carousel as a screen of a device!! Maybe not able to achieve what im looking for here without a few hacks like you say but for another page I will definitely try to have a go at that ! Thanks!

Thanks Michael, It needs a little work to perfect it I think so there is no risk of the content wrapper moving but the concept is there with no js!

Keep an I on my codepen ill be adding the Ipad Version Shortly!

Dropped a little jQuery on if your interested Michael.. Prevents the page scrolling while hovering the dummy-content div!

Here it is on the main site via workspaces and codepen again..

WorkSpaces

CodePen

Ohh and changed some of the sizes, properties and values so it now stays centralized when on a page anywhere !! Had to fiddle with some margin and positioning..

Craig

No Problem Michael ! I will drop you the link once its complete !!

Thanks for your feedback and help on this !!

Craig