CodePen
I have this code: https://codepen.io/rad-mej/pen/LYBverx
It's a mdbootstrap side menu, it has initial transform: translateX(-100%); and when I click to open the menu transform: translateX(0px);
I think position fixed and translateX causing issue with the vertical scroll. I cannot vertical scroll on that menu on mobile devices.
I tried evrything I know to make the side-nav scroll and it did not work, any help please?
As I read your code in CodeSandbox, the reason why you cannot scroll vertically is because of the overflow: hidden; (line 35) in class .side-nav. Just replace it by overflow: auto;, then you can scroll normally.
The position: fixed; or translateX doesn't effect this.
Related
I'm making a new website where I want my navbar fixed top when scrolling. It works, but on mobile there is white space on top or bottom when we scroll. The problem is than I have a nav coming from left side on mobile. This nav doesn't moove when I scroll, no the top navbar go under the left navbar and its really ugly.
Here is my website if you don't understand https://www.hytalefrance.net
I've tried something like this:
overscroll-behavior: none;
But It change nothing
body {
height: 100%;
overflow: auto;
}
Do nothing to
It's a classic bootstrap 4 navbar, but I don't use fixed-top class to make it fixed, it's a custom class similar to fixed-top
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
I would like the whitespace on mobile disappears.
Some screenshot taken on my mobile (iPhone 6)
I'm actually scrolling down:
When nav is open:
When I scroll with nav open:
I guess you're taking about inertial scroll behavior caused by over scrolling a webpage in iPhone. There is no ideal fix for this problem.
There're few partial solutions that may / maynot work in your case
- How to disable inertial scrolling on body for iOS browsers?
- ipad safari: disable scrolling, and bounce effect?
Though, It is not recommended to prevent it. Doing so will intercept natural scroll smoothness in browser.
I'd suggest you to set your body's background color to the exact bg color of your nav bar to make it less obvious
I fixed the problem by removing my js function. On desktop navbar will not be fixed, on mobile the navbar is now directly fixed, and it works
I'm developing a web site based on the Hyde theme for Jekyll.
This layout uses a fixed navigation bar on the left with 100% width. This is working fine in most situations.
In Safari on iOS, however, the height of the viewport changes while the user is scrolling as the browsers top navigation bar collapses. If this happens, the navigation bar's size is not updated until the scroll stops, leaving an area in the lower left corner that is not covered by the navigation bar:
(Notice the text extends below the navigation bar. This screenshot was taken while the page was in motion.)
This video shows the problem in action.
Is there any way to force Safari to update the navigation bar's height while the scroll is in progress?
its an ongoing discussion. There is no real solution for this problem. https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
What you can try for your website is the following:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
width: 18rem;
text-align: left;
height: 100vh;
}
This will align the sidebar to the bottom and the text wont cut. The white bar will appear on top but it wont be too intrusive as the bottom being cut out.
Add the below styles to fix the issue
html,body{
-webkit-overflow-scrolling: touch;
}
Here you find the reference
I try to make a mobile menu: http://animesector.budi.upperyard.de/
You can see at the top Header Bar 2 Menu Buttons.
The right one give the Content area transform(translateX(-200px));
The left one give the Content area transform: translateX(200px);
The Negative (-) value dont create a Scrollbar horizontal Scrollbar...
But the Positive one does. have anyone any solution for this problem?
I tried to give the div around a overflow: hidden; but this didn't work for me.
You can prevent the horizontal scrollbar with overflow-x: hidden in the body element. Tried it right in the browser with dev tools and worked perfectly.
I had exactly the same issue. In the end I avoided the menu getting scrolled off the screen using translateX - I used the scale transform instead.
Your site is not visible anymore, but probably this is what you did to make the menu visible by transitioning:
translateX(-200px) -> translateX(0)
I used the scale to achieve somewhat similar transform:
scale(0,1) -> scale(1,1)
.menu {
transition: transform 150ms ease-in-out;
transform-origin: top right;
transform: scale(0,1);
}
.menu.open {
transform: scale(1,1);
}
Yes, there is a difference in the animation but it's probably not even recognised by most users if it happens fast.
No overflow manipulation needed.
I've added a sidebar tab "Subscribe" (jquery.tabSlideOut.v1.3.js) to my site (visit http://thecasket.co.uk/). Desktop browsers fine, but causes horizontal scrollbar to appear on iPad - and pages start sliding around. The tab has a negative absolute position (-290px, width + padding in my css for the slide-out-div) set in the javascript. On the iPad the scrollbar takes in the width of the slide div.
<div class="slide-out-div">
my subscribe form
</div>
.slide-out-div {
padding: 20px;
width: 250px;
background: rgb(255,255,255);
z-index: 9999;
-webkit-overflow-scrolling
}
I've tried adding: -webkit-overflow-scrolling: touch; but doesn't seem to do anything and I'm not really sure what this would do.
Any help on fixing the scroll, much appreciated.
As you don't define overflow:hidden to any parent container, the mobile devices expands the viewport to the size of the content. You you could go with this approach and set the overflow value or you can use position: fixed instead absolute on the slide-out-div. Both should do the trick.
Also note the text of the <a>-element with text-indent: -99999px; is "content", but I guess it should be "subscribe".
I am having trouble with a full page background in a test wordpress site. I can't get the page scroll bar to appear.
Any help would be appreciated.
[EDIT]
The issue is you added the following to your body tag.
position: fixed;
Remove that line and everything should work then.
That is probably because there is no need for a scrollbar because the page doesn't extend the full height of your screen resolution.
I just figured this out myself:
I changed this for the background image:
position: absolute;
to
position: fixed;
and deleted
overflow: hidden;
This allows the scroll bar to appear and the fixed background position makes the background stay in place. The background still re-sizes perfectly, this just lets your content scroll.
Then add the following to do away with the horizontal scroll that appears:
overflow-x: hidden; /*Horizontal scrollbar*/
-ms-overflow-x: hidden; /*IE 8 horizontal scrollbar*/