Im looking for a way to scroll the content of a div, whitout animating the content, but instead actually scrolling the div.
Preferably, the result would be something like this:
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
but when you drag the handle, i want the div containg the long content to scroll, not the long content to animate in to view.
I would like to do this because that would mean the content is scrollble on touch devices aswell, and it would utilize the browsers scroll-capabilities instead of moving dom-objects around.
I found this script http://jsfiddle.net/Nkf9n/18/ wich lets you scroll by dragging, with added inertia, but i cen't really wrap my head around how i would apply i to a separate handle, controlling the scrolling.
jquery-solution would be ok, but i'd prefer a vanilla-javascript example to wrap my head around.
Related
I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!
I'm trying to achieve the fullPage.js scrolling effect inside of a container element.
The best way to describe it is kind of embedding another page inside the viewport and apply fullPage.js to it only.
In the picture below you can see the viewport background color is actually grey-ish while the container object is white. So the actual viewport should be static, non-moving, while the container should be the real scrollable page.
I know this should be possible by vertically stacking up div's the same size as the container, setting overflow to hidden and then emulating a scroll effect using JS manually. However as fullPage.js is pretty reliable and featured I'd like to know if there's a little hack for this so I can save myself from all this work.
Kind regards :)
Image of what I'm trying to achieve
EDIT
Solved using the mousewheel event, an overflow-hidden inner container and GSAP. Turned out to be pretty simple actually :) Could need some tweaking with the y-Delta value to have more page switch scrolling threshold
Demo: https://jsfiddle.net/bva8g3u9/
I have two content_editable <body> elements, that have the same exact content. I need to make one reflect the position of the other. So, if the user moves the caret down and scrolls the content, I need to make that change happen on the other element.
I tried using jQuery's scrollTop, to no avail. I've also looked at a few caret based positioning solutions, but nothing has worked yet.
A bit more background. I have a magnifier widget, that uses the css3 zoom feature to magnify content. This is done by duplicating the content via HTML and then zooming in a div on that content.
There are ckeditors in the content, which means there are iframe's with content_editable <body> tags.
When the content is duplicated, it does not preserve the position of the body's scroll. How can I get the position copied into my copied content?
PS. The only essential browser is Chrome.
I have to create a banner that expands over content when moused over and then contracts on mouse out. I have managed to create the expand/contract animations and actions but I am having trouble positioning the that the flash file is in to ensure that it's flows over other elements on the page.
Can anyone give me a lesson on doing this. I imagine its a bit of CSS and a little bit of javascript.
Thanks!
Look at wmode=transparent for getting flash files to work nicely with other elements on the page.
If you can add the wmode to the flash object, you shouldn't have any problems.
Just wrap the flash file in a div wrapper and position the div or do whatever you need that way.
differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage
Meant to add, if you change the wmode, and wrap it in a div, then you can assign the div a position of absolute and use z-index:99999 to have it above all other elements.
I'm using iScroll4 to make a certain element scrollable in my webpage but it snaps back to the original position once you release the mouse/touch. How do I make it stay instead?
I think that I have figured out why this happens. I had iscroll4 working in a Phonegap app that I was building, and then broke it after changing some CSS. At the time, I didn't realize what I had done and I spent a long time hunting for a Javascript solution.
Finally, I noticed that when I tested it in a browser, there was a scrollbar for the list where I was using iscroll4. And when I tried to scroll, the scrollbar thumb changed size. That is why it was snapping back. The browser made the wrapper div big enough to hold the entire list, so whenever I tried to scroll, there was no hidden data so I triggered the pull-up event and then the browser resized the div.
I had to change the CSS to include overflow:hidden and it started to work again. I tried overflow:hidden on the ul tag and the scroller div but that didn't work. It has to be on the wrapper div.