I am using jquery mobile in which I seperated the page content into three div's horizontally, that is each div is an page. I used this logic for loading the page with animation using jquery mobile load() method.
The problem is that I can able to see the page(first div) in which I can scroll, So that it is showing the second page(second div) which I dont want to see.
JS Code:
$(document).on("touchmove","#homePageContent",false);
The above code prevents the screen scrolling horizontally and vertically but I want to prevent only horizontall scrolling.
css overflow-x:hidden is also not working.
Related
I would like to add scrollbar if the page grows. When the page loads, I am hiding the scrollbar but it should expand only when the page expands.
I tried adding the following script but it did not work.
Firstly, I tried $("#OFormDiv").css("overflow", "auto"); which did not work. I am expecting to add scrollbar only when the page goes below the screen and you do not see the content unless you reduce the screen size.
Secondly, I tried below which hide the scrollbar in the first place but did not add scrollbar when the page grows.
$("#OFormDiv").css("overflow", "hidden");
Hay,
I'm using jquery.fullpage.min.js plugin in my site for fullpage and scrolloverflow.min.js for scroll inside divs. I set autoScrolling:false, scrollOverflow:true because i I don't want auto scrolling, and I want overflow scroll inside div.
The problem is that when I scroll the overflowed div, the whole page scrolled too.
I tried use normalScrollElements:"my-div", but it works only when autoScrolling:true.
how can I avoid page scroll when user scroll the overflowed div?
Thank for help!
Few things:
autoScrolling:false, scrollOverflow:true are not compatible options. You can probably see an error message saying exactly this in your JS console. So expect problems in different browsers :)
normalScrollElements won't have any effect when using autoScrolling:false.
normalScrollElements won't have any effect inside scrollOverflow
I'm making a dynamic page, in HTML/CSS using Javascript and jQuery. The height of this page can change, and a scrollbar can appear or disappear. Also, I want the content to be centered. To achieve that, I use margin: 0 auto;. But when the scrollbar shows itself (or hides itself), the page moves a little on the side.
How can I prevent it from moving left and right ?
EDIT
Here's a jsfiddle to see what the problem is (sorry, the content is in French):
http://jsfiddle.net/r4jspomr/
You can click on the titles to extend/retract the content under it
it is default Behavior of browsers, you can disable scrollbar using the following code and then use a beautiful custom-scrollbar like this
$("body").css("overflow", "hidden");
When I load the page, a modal immediately is displayed. However, about half the time, it's impossible to scroll. I can see the scrollbar on the side of the window, but it doesn't let you scroll. Also, zooming the window into 150% allows scrolling to work again.
How can I make it so the user can scroll up and down the modal? I'm using jQuery.
Modals will generally remove the scrollbar and male your page eesize due to the fact that when a modal is loaded, you normally overlay the body elements which remives and scrollbara, causing the body or wcreen width to adjust.
I have content in a horizontal div that exceeds the page area so that to see all of it you have to scroll horizontally. Fine with a trackpad but for those who don't have one I want to make this obvious with the use of either scrollbars or mouseover text/image.
After hours of experiments I finally found this code - scrolling a div of images horizontally with controls - which is perfect(just changed it to mouseover).
The only problem is I want to do it smoothly and without having to repeat the mouseover or clicking.
Also I want to avoid Jquery and all that sliders stuff. I'm a very new to JS and want to keep things simple. Also I wasn't able to force a scrollbar with any CSS solutions.
Thank you