I have a website using the fantastic fullPageJS plugin, and it does what it does very, very well.
I have however, an issue on mobile devices, where the sliding hamburger menu does not scroll with touch controls when the menu height exceeds that of the ViewPort, as in this picture:
Question
How do I force the side menu to accept touch-based scrolling?
You should make use of the fullpage.js option called normalScrollElements.
As detailed in fullpage.js docs:
normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the Javascript selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.
Additionally, you can call fullpage_api.setAllowScrolling(false) when opening the modal. That will prevent fullpage.js to scroll up or down when using the mousewheel or trackpad.
You can set it back to the default value when closing the menu by using fullpage_api.setAllowScrolling(true).
You should try to add overflow: scroll if you haven't already.
Related
This Stackblitz example opens a simple dialog which contains a radio group in the mat-dialog-content div.
You can see that the dialog-content shows an ugly scrollbar:
This does not happen when other components are used: e.g. input, etc.
Using chrome dev-tools, I can see that the mat-radio-buttons have a height of 20px:
but the mat-radio-group only has a height of 17px:
Is this a bug in angular material components (the example uses version 12.0.4), or is there a simple workaround/css that we can use to get rid of the scrollbar?
I've tried explicitly setting the height on the mat-radio-group, but this has no effect.
Notes:
in production we do of course have many dialogs and some of them are large and need the scrollbars
we need an application wide solution/workaround
simply hiding the scrollbars is not okay: it must remain auto so that the dialog can react to size changes (e.g. user rotates device, some items are shown/hidden dynamically, etc.
For now we came up with a workaround that fixes the issue in all our 30+ dialogs.
The nice thing is that we can apply it in one place, in styles.scss:
.mat-dialog-content {
padding-bottom: 10px !important;
}
We just add a padding to the bottom of the dialog content area and then scrollbars: auto works as expected in all our dialogs (small and large). i.e. when you make the browser window larger/smaller, the scrollbar is automatically shown/hidden.
And it also works when there are multiple mat-radio-groups in one dialog.
The additional padding between the content and bottom dialog-actions is acceptable for our ui.
Stackblitz example with workaround
The reason this happens is due to the ripple effect on the radio button - which takes up additional space and causes the scrollbar to show. See https://github.com/angular/components/issues/20344
There are a number of ways to resolve this, such as using padding or margins on the components or on the dialog content itself like you did. The important thing is that there is enough space added to accommodate the ripple.
I've been trying to programmatically scroll a list (accordion) in an Ionic-Angular app and I’ve been having no success at all.
I reproduced it in this stackblitz: https://stackblitz.com/edit/stack-overflow-ionic-scroll-problem?file=src/app/home/home.page.ts
When you click on an item, it expands and I want it to align to the top of the screen (with the title visible). In this example, I am using scrollIntoView() to get it to the top but it disappears behind the toolbar.
I've tried many things to get it to align properly (including setting a "scroll-margin-top" as suggested on many posts) but this hasn't worked for me.
Also, I can't seem to be able to use the scrollBy() or scrollTo() method... they do nothing at all.
Can anybody help me figure this out and get this precise example to work? Thanks in advance!
The problem is in the property [fullscreen]="true" of the <ion-content> tag.
The property fullscreen of ion-content, according to the ionic documentation...
If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
In ionic when you use the option fullscreen as in <ion-content [fullscreen]="true"> it adds the following style to the ion-content tag:
--offset-top: 56px;
The goal of the [fullscreen]="true" is to create the effect of the content scrolling behind the header.
As a side effect, part of the <ion-content> is hidden behind the <ion-header>.
Fullscreen property and scrollIntoView()
According to w3schools...
The scrollIntoView() method scrolls the specified element into the visible area of the browser window.
So, in your code, when you call scrollIntoView() of a group it is working exactly as expected. The screen is scrolled until the top o the group is into the visible area of the browser. The problem is that the <ion-header> is covering part of the top of this visible area.
Solution:
If you remove the [fullscreen]="true" of the <ion-content>tag the scroll will work as you expect.
But you will loose the effect created by the fullscreen property (content scrolling behing the header).
References
Fullscreen property of ion-content tag:
https://ionicframework.com/docs/api/content
ScrollIntoView:
https://www.w3schools.com/JSREF/met_element_scrollintoview.asp
I add a vuetify drawer to my application, and set the position to fixed and temporary.
When the drawer is open (and I have overlay), when I try to scroll the drawer stay in position - good. but the problem is the event pass to the page, and the page is do scroll.
How can I fix that?
My code on codesandbox.
open the link
click on toggle and the drawer is open.
try to scroll (with the mouse)
if you do, it's bad.
Your problem is that you give the wrapper div height:3000px.
you have to set it to height:100vh - in this case it will take the maximum height of your screen (like 100% of it)
I'm using meteor + bootstrap.
My nav is at the bottom of the page and the logginButtons are in the navbar.
The dropdown drops down, below the end of the page.
Is there a way to make it drop up, on top of the navbar ?
The pattern is my background, under firefox's window.
The Bootstrap document states it clearly that
Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.
You will see a working example if you follow the link.
I'm working on a phonegap app that has a fixed sidebar behind the page and I found an behavior issue.
The sidebar is hidden, the user can see it with a tap on a menu icon. When the user tap on he icon the page go to the right and it shows the sidebar that is in a minor z-index.
If the user want to close the menu he have to drag the visible part of the page to the left.
My problem was that in the sidebar I have a block that is vertically scrollable. It works fine but the thing is, if I put the .scroll (overflow-y: scroll; -webkit-overflow-scrolling: touch;) class in this element and the user swipe horizontally from right to left over it the sidebar and the page start a drag.
We're using snap.js for the sidebar interaction.
I want to disable this drag. I tried with CSS and preventing horizontal scroll but it doesn't work.
I attach a pic for more visual details.
Use iScroll5 for scrolling.
Then hook into the onScrollStart event:
myScroll.on('beforeScrollStart', function(event)
{
if (isPanelOpen){
myScroll.disable();
}
else{
myScroll.enable();
}
});
Or - if you not wanna use iScroll5, you can set a global bool, which indicates, if a panel is open (you've gotta do this anyway).
If a Panel is open (meaning, you're showing the sidebar) set the bool to true in snap.js - this subsequently means, you've gotta tweak snap.js.
Then, on touchmove, check the bool if it is true. Then you know, a panel is open, and you can do a event.stopPropagation on touchmove in order to prevent the event bubbling up to get recognized by snap.js and avoid the panels closes too early.
Woop! We found it!
The problem was that we're catching the touchmove event for each element with .scroll class and we're stoping the propagation of it.
We had notice that when we tried to start a horizontal scroll all page was moving like a drag so we added this CSS property:
html, body, .ui-mobile .ui-page-active { overflow-x: hidden; }
And...it works fine!
P.S. we don't actually need the horizontal scroll in any element, so, this is fine for us.