how can i hide scrollbars in a website, disabling scroll by mouse but being able to reach hidden areas of the page with the jquery scrollTo plugin function? (click on a button and page scroll to the target element)?
thanks!
To disable scroll bars a simple css:
html, body {
overflow:hidden;
}
To scrollTo please look at this example:
http://www.adriantomic.se/development/scroll-to-the-top-with-jquery/
Related
On our mobile site, when clicking the hamburger icon in the top right I want the drop-down menu to appear and be scrollable, without the background scrolling. I have written javascript to set the body to fixed when you click the menu icon, however, this results in the website jumping to the top of the page. This is not what I want, I would like for it so that when the user clicks on the menu button, the background page stays where it is and does not jump to the top.
Below is the code that I have already tried for this.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("body").toggleClass("noScroll");
});
});
CSS
.noScroll {
position: fixed;
}
EDIT Here is the website: http://s2br5s5r3.gb-02.live-paas.net
href="#" makes page going top, give correctly url ex: href="https://www.google.com/" then the problem of going top will be solved.
css
.noScroll {
overflow: hidden;
/* position: fixed */
}
javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
then the <body> will be unscrollable.
first of all remove the css position fixed from the class no-scroll. That's what is causing the page to jump on top when you click the menu button. After you open the menu it is scrollable as it should, i assume what you want is to prevent the page behind the open menu to be scrolled when the menu is open. Ypu can achieve this with javascript event listeners like so:
EventTarget.addEventListener('scroll', noscroll);
instead of EventTarget give the body an id and use the event listener to that when the user clicks on the element, but then when they close the menu you should remove the event listener with:
EventTarget.removeEventListener()
I hope this helps you
Keep in mind though that you have to separate the content of the page from the menu, because if you add the no scroll to the body that will apply also to the menu as long as it is a child of the body
I would like disable vertical scroll in all mobile devices and i found this:
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
that works very well...
but in this way i disable scroll also for a div (my menu) that has overflow: auto.
In dekstop browser to avoid anything with JQuery when $(window).scroll() add overflow: hidden to body. And in that way i don't have problem, but with native javascript code yes... i'm new in javascript.
So with jquery i was able disable scroll of body eccept div with overflow: auto, but not with that js code.
I hope you can help me and sorry for my english.
i solved always with jQuery:
when i want disable scroll add:
$("body").css({"overflow":"hidden",'position':'fixed'});
with body: fixed i'm sure that also with mobile device is impossible scroll the page (except div that has overflow: auto
you could disable the scrool on just the body part by making it the size of the screen and then make it so it doesnt scrol
document.body.addEventListener('touchmove', function(e){
document.getElementsByTagName('body')[0]. style .height = "100vh";
document.getElementsByTagName('body')[0]. style. overflow = "hidden";
});
I have a div(menubar) that has a lot of links and these links are out of the view. I must make the div scroll to the right or left when the cursor is at the edge of the menu div, in order to bring these menu items into the view.
I am a beginner with Jquery, so any help is greatly appreciated.
Markup is in Jsfiddle
Short:
Use-ready solutions:
Scrolling-carousel
Jmycarousel (demo)
Smooth div scroll
Full answers you can read on relative questions:
jQuery plugin to continually horizontally scroll on mouseover
Looking for jQuery plugin (or code) to automatically scroll Carousel items on mousover
Take a look at this example, in this example you can see how they scroll the div when the mouse at right edge of the div. you can do the same thing.
How to Auto Scroll a div on mouse move over the margins?
Here Answer
<div onmouseover="this.className='addscrool'" onmouseout="this.className='removescrool';" style="width:100px;height:100px;border:1px solid Blue">
</div>
<style>
.addscrool
{
overflow-y: scroll;
} .removescrool
{
overflow-y:hidden ;
}
I'm trying to hide the scroll bar of the document (in some browsers it's the body element, in others it's the html element) by using overflow:hidden;. Then i'm using jQuery.animate() to try and animate the scrollTop property. It works fine when the scroll bar is visible (i.e. without the overflow:hidden; style) but doesn't work when the scroll bar is hidden. Why is that? I'll be able to post a link to a snapshot of the problematic page in a bit...
Try make <body> overflow:hidden and animate the margin-top property, note the margin-top should be negative if you want a positive scrollTop.
On webkit you could use ::-webkit-scrollbar: { display: none; } to hide the scrollbar with scroll features enabled.
1) If you have a Google Plus account, go to your home page.
2) On the right side, there's a list of "Add to Circle" buttons that you can hover over.
3) Notice that when you hover over one of the Add to Circle dropdown (if you have enough circles to have scrolling in the dropdown) the page scrolling feature is disabled. Only scrolling vertically in the dropdown is allowed.
How is this done with javascript?
I can scroll in here (the scroll bar on the right), but can't scroll on the page body while this is dropped down.
The have an element that has a fixed height and is overflow auto, they styles the scrollbar with this trick: http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/
You could make it work in FF and IE to: Basically you nest a element that is overflow auto into a other and hide the scrollbar with a negative margin. Then you capture the scroll event on that same element and adapt the slider on the right side according to the scrollTop position.
Here is how i would do it: http://jsfiddle.net/kGbbP/4/
But there are many jquery plugins that can do this:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
this isn't made via JavaScript!
It's pure CSS, and works only on (non-mobile) webkit based browsers.
Here is the CSS code, just include it in a CSS file, attach it to an HTML document, and run the .html file.
Here is a demo: http://jsfiddle.net/3ZqGu/
And here is the CSS code:
::-webkit-scrollbar {
background:transparent;overflow:visible; width:15px;}
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2); border:solid #fff;}
::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.4);}
::-webkit-scrollbar-thumb:horizontal {
border-width:4px 6px;min-width:40px;}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;min-height:40px;}
::-webkit-scrollbar-track-piece{
background-color:#fff;}
::-webkit-scrollbar-corner {
background:transparent;}
::-webkit-scrollbar-thumb {
background-color: #DDD;}
::-webkit-scrollbar-thumb:hover {
background-color: #999;}