Hello, the website that I am currently working on is Redec, and I am having an issue with the background scrolling when the menu is open on IOS. Please inspect the website as I am currently unable to supply the RAW html.
To replicate the issue, open the website (Redec) and click the menu item in the top right, and scroll down. You will notice that the background (body I think) also scrolls, and when you close the menu you are at the bottom of the page. I've looked everywhere and am unable to fix this problem.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
CSS
.noScroll {
overflow: hidden;
/* position: fixed */
}
Related
I want to create mobile menu. This same menu I want to use in desktop amd mobile screen but style is a little bit diffrent. In mobile screen menu is hide but hamburger menu is display. When user click the cross in menu, this's going to close. It's very simple. On desktop screen menu is display all the time. Code look like this:
$('.hamburgermenu').on('click', function(){
$('.menu').fadeIn();
});
$('.close').on('click', function(){
$('.menu').fadeOut();
});
It works correctly but css manage to visibility too. I use #media to hide and display menu
#media(min-width: 1200px){
.menu{
position: relative;
display: block;
}
}
And this is my problem. If user close the menu (click on .close, menu doesn't display after change size of browser. For example - I'm testing my website in small window and I close the menu. After I open fullsize window, the menu won't to display.
The problem is when you use fadeOut() on an element, the display of that element remains hide(look at your console and check the inline style of this element).
use $(window).resize(function() {}) to remove inline styles affected by fadeOut() in sizes that you consider as media breakpoint.
One way would be to detect when the user changes the window size, e.g.:
$(window).resize(function(d){
if (window.innerWidth > 1200) {
$('.menu').fadeIn();
}
})
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 have a fixed box at the footer of a product page, which is working fine now with this fix applied:
html, body {
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100%;
}
As it fixed the problem on iPhone where you focused in the QTY input field and it pulled it down to the bottom of the page; that fix above now sorted that and works perfect!
However, the accordion tabs on the page dont work a expected, if I remove that fix for the other issue they work but with they don't.
I think it might be easier to do a fix for the scrollto tab as I have searched and read about the fix focus issue; what it does when you click a tab now is just goes to the top of the page and does not scroll to the active tab. Here is the function:
function scrollToTab(x) {
$("html, body").animate({
scrollTop: $(x).offset().top - 10
}, scrollSpeed);
}
I am sure it is the html, body its trying to animate and scroll so anyone know what I can maybe change to this to get both working?
Maybe only set those styles / fix on html, body when input focused and remove when not? that might work.
Ok, so there is a webpage with a long list. In the middle of the list I'd like to lock the scrolling and later enable it again. How would this be possible, so that it would behave nicely in modern mobile browsers?
One solution I tried is to set body position style to fixed and the setting top style to the scrollTop value prior to the setting position to fixed. There is this thing about position: fixed - as soon as it is set, the page will be jumped to the top. Problem is that on iOS Safari the page is sort of flashes when you enable/disable scroll, and it also gets really laggy behaviour on Android Chrome.
Any better hints?
Update: I have a sidebar menu with list of items, and while the main page should be locked, sidebar menu should remain scrollable.
Just add a class to the html-tag every time you want to look the screen. I use this method on js modals or lightboxes.
You can do this simply by adding the overflow attribute.
.
CSS:
html.-is-locked {
overflow: hidden !important;
}
.
JS:
Now you just have to add/remove the class with javascript:
//Get HTML element
var html = document.querySelector('html');
//Activate
html.classList.add('-is-locked');
//Deactivate
html.classList.remove('-is-locked');
//Toggle
html.classList.toggle('-is-locked');
Try this on the body instead of position:fixed:
body.locked{
height: 100vh;
overflow: hidden;
}
It will keep the scroll position but prevent scrolling.
I'm working on a site where I made the sidebar to be fixed on the left and extended to the full height of the page using this CSS:
sidebar {
position: fixed;
top: 0;
bottom: 0;
}
And that works fine to keep the sidebar in place, but the problem is when the page is re-sized to a smaller height, you can only see the stuff at the top of the sidebar and there's no way to see the stuff at the bottom of the sidebar.
Now, I know I can add a scroll bar using overflow-y: scroll; but what I'm trying to do is have a scroll bar that only appears when the content on the sidebar exceeds the height of the window and only appears on hover. I also want the scroll bar to have some style to it, similar to the sidebar on TheNextWeb or the Facebook chat sidebar.
I know I need some JavaScript to do this, but my skills in JavaScript are very limited so I appreciate any help on this.
overflow-y: auto should work:
For styling you should probably search for a good scrollbar-replacement, as scrollbar-styling only works in webkit (http://css-tricks.com/custom-scrollbars-in-webkit/). It's not a trivial thing to do, but fortunately there are some plugins:
http://cubiq.org/iscroll-4
http://jscrollpane.kelvinluck.com/
http://www.yuiazu.net/perfect-scrollbar/
Just to mention a few.
EDIT:
Thanks to sheba, I made some modfications:
.sidebar:hover{
overflow-y: scroll;
}
http://codepen.io/johannesjo/pen/GcLFn