I am using idangerous vertical swiper of two slides in a mobile app using jquery mobile. I need a vertical scroll bar in second slide as I have grid in it, but both as the slide height is fixed I am unable to achieve it. I have a thought that swiper event and scrolling event will be collided. I have tried in lot of ways but couldn't break this.
Thanks,
E. Ramesh Babu
So are you looking for something like this?
CSS:
.swiper-slide:nth-child(2) {
overflow-y: scroll;
}
It should be a simple as that.
DEMO HERE
And here is making it vertical
DEMO HERE
on mobile devices, you should use
e.stopPropagation();
on the element you want to scroll on touchstart event
Related
I am trying to make DOM with "overflow-y: auto;" to scroll smooth when using the mouse wheel, is there any settings for CSS or JS code that would make it to scroll smooth instead of making big jump per scroll?
I'm not sure if it is possible but you can use a scroll plugin to set steps on mouse wheel like this plugin (it needs jQuery)(you can find more documentation of it by searching the plugin name).
I hope it helps :)
High level: What kind of things can prevent the mouse wheel from being interpreted properly for scrolling? What are some debugging tools to check these?
I have a section of my page that is correctly displaying a vertical scroll bar. However the scroll wheel on the mouse fails to scroll the section unless the mouse is directly over the scroll bar.
What I believe is the relevant div has overflow-x: hidden and overflow-y: auto.
These are coming from the Zurb Foundation Apps CSS. I have, unfortunately, been unable to replicate this behavior within jsfiddle, so I'm hoping for further investigative tips.
This appears to relate to Foundation Apps grid-block classes. If you have a grid-block which has a single child grid-block this can somehow prevent the scroll wheel working.
I ended up replacing the child grid-block with a raw, full-width div.
I found the problem was the grid-frame class, specifically setting the height as 100vh causes the scroll wheel to bug out.
I replaced the grid-frame with a grid-block and didn't use grid-frame at all.
I have two divs with the total height of the viewport and a button for scrolling from one to another with ScrollTo jquery plugin. The problem is that I want to prevent the posibility of manual scroll.
I want that when someone scrolls with mouse down, the browser scroll automatically to the second view, and when I scroll to top gets the previous view.
I don't know if I'm explaining well, here an example: http://orangina.eu/heritage
Try to scroll in this webpage, this is what I need.
Thanks!
Correct me if I'm wrong but it looks to me like you're trying to disable the browsers default scrolling behaviour, attach events to scroll up and scroll down and scroll up or down to the height of the page's height.
The way I would do this is disable the browser's default scrolling behaviour with overflow:hidden to the body and html.
Then you can bind the jQuery "mousewheel" and "DOMMouseScroll" to the div checking for "event.originalEvent.detail > 0" or "e.originalEvent.wheelDelta < 0" for down scrolling or else for scrolling up.
Finally add your function call inside the if or else depending on the downscroll or upscroll.
I can write the code if you want but it might help you more if you try this yourself.
You can achieve that same effect by using fullPage.js plugin for jQuery.
Compatible with old browsers such as IE 8.
Touch devices compatible
CSS3 animations improving performance
Lots of options, callbacks and methods.
Thanks for all replies!
I solved my problem, instead of using standard scrolling I used the translateY css property. Setting a data-id to each page layer and doing translateY(100%, 200%, 300%...) every time I want to scroll down/up.
Helo to all, i have been searching all over the web for some jquery or javascript tutorial or plugin for a horizontal scrollbar and i have found many of plugin asnd tutorial but not the one i want.
Now im using tinyscroll and i have found it has alot of bugs, can somebody help me with the next effects.
Mouseover: At mouseover at the right or left it scrolls by itself.
Shadow at hiding: When a image hides at the left or right a shadow effect that gives a "it got in the bottom of this layer" effect.
Scrollbar: simple bar that has a 80% opacity
mouse scroll: that mouse scroll can be used with it.
I need something like the movie scroller in this page:
Cuevana.tv
And i know html and css but css -webkit styling can't do this effects.
I really dont have any codes to start with, please help.
Try this one.
It has the horizontal scrollbar and the mouse scroll works.
With css you could get it to look exactly like the one in the link you posted. (positioning the left and right carets up by the image container and etc...)
I'm quoting a good SOF answer here: jquery horizontal scroll
Try hoverscroll jQuery plug-in - http://rascarlito.free.fr/hoverscroll/
Also try Smooth Div Scroll - http://www.smoothdivscroll.com/demo.html
I'm using the scrollto jquery plugin (http://trevordavis.net/blog/jquery-one-page-navigation-plugin).
It's a single-page website that scrolls horizontally. But there is also a page with larger content, so that page scrolls vertically. As you can see in this example: http://www.seegermattijs.be/!/ When you go from 'projecten' to 'seeger', the vertical scrollbar also slides, and this is not what I want (if you can't see the scrollbar, resize your browserscreen).
Can anybody help me out?
Thanks a lot!
Put the overflow-x: hidden;overflow-y: auto; to the wrapper, not to the child elements.