I've creates a "touch-list" component for EmberJS, based on ember-collection, with ember-gestures mixed in:
import RecognizerMixin from 'ember-gestures/mixins/recognizers';
export default Ember.Component.extend(RecognizerMixin, {
recognizers: 'tap press swipe',
...
swipeLeft(event) {
...
event.preventDefault();
event.stopPropagation();
},
...
My test app has two panels, one for the list and the other for item details. (Slighly out-of-date source code is on GitHub.) On a screen 640px or wider, the container for the panels is set to the viewport width, and all is well - horizontal swipes are recognized, and don't trigger scrolling.
On a screen 639px or narrower, I set the container to twice the viewport width, and each panel to the viewport width. Horizontal swipes on the list header or detail panel scroll, as expected.
The problem is horizontal swipes on list items on touchscreen devices. They are recognized as gestures, and handled by list items, but they also cause horizontal scrolling! As seen above, I call event.preventDefault(); and event.stopPropagation(); but that doesn't help.
How can I prevent swipes from causing horizontal scrolling?
My solution was to change the layout so horizontal scrolling never happens. Now, the horizontal movement of the panels is implemented using transform: translateX(-100%);
I have thusly advanced to a new level of confusion:
How do I set a class on a parent element when a route is the first one loaded?
Related
In the below screenshots (taken from the Apple Developer app), we can see that the Account button sticks to the bottom of the sidebar.
When the window is tall enough (left), the list doesn’t scroll, Account button’s background color has no difference. When the window is not tall enough (right), causing the list to scroll, Account button changes its background color to reveal the relationship.
The list's scroll position can not be probed. How can I declare the Account button in SwiftUI?
That app is a UIKit catalyst app and the sidebar uses scrollViewDidScroll which uses the contentSize to set a bottomButtonState which is passed into a child UIHostingController (so the account button can be SwiftUI) which I would assume switches between a clear or solid background.
We cant get the scroll info in SwiftUI however a possible workaround would be to add dummy 1 pixel high cell to the bottom of the list and using its onAppear to set a binding that is used in a bottom view to enable/disable a background colour and should achieve the same effect.
Many apps have an intro view that has fullscreen pages with a dot indicator at the bottom. Sometimes it is used to gather same basic information, sometimes to introduce the app features.
How can I realize that?
I tried the ScrollView with a horizontal setting. The issue is to set up the content to fit the screen and have the edges snap on scroll. Second issue is the have a dotted indicator that highlights the current page.
you need to wrap UIPageControl with UIViewControllerRepresentable.
I am developing a touchscreen compatible app that has some widgets that contain QScrollAreas. I am using
QScroller::grabGesture(ui->scrollArea->viewport(), QScroller::LeftMouseButtonGesture);
to allow the user to easily scroll these widgets by swiping.
However, some of the scroll areas contain subclassed QGraphicsViews. I am adding QGraphicsItems to these and would like the user to be able to select items using rubberbanding. I have set the drag mode using
setDragMode(QGraphicsView::RubberBandDrag).
This works as desired if I don't also use grabGesture on the scroll area containing the view.
However, grabbing the gesture for the swipe scrolling interferes with the rubberbanding action of the graphics view.
How can I scroll widgets containing these views while also keeping the rubberbanding functionality in tact? I essentially want the widget to scroll unless the user is swiping inside of a QGraphicsView.
I have two QGraphicsView that are of equal width, one ontop the other in a Vertical Layout.
When I re-size my application window, the QGraphicsView on the bottom does what I expect, it remains at the exact position it started at, however the top view begins to move the scene to the right exposing coordinates that are below x=0(essentially blank padding on the left edge of the View), which I do not want, I need both to behave the same because they correspond to each other.
I must have missed something, because should these views behave exactly the same? I need them to align, as the top view has hidden scroll bars and scrolls horizontally by however much the bottom view is scrolled.
Make sure your resizeAnchor is set to NoAnchor and alignment is Qt::AlignLeft | Qt::AlignTop. You may need to try some other combination to work with your situation.
I have a component extending a Spark List, and when I scroll using the mouse wheel it scrolls too much in one go. I have tried looking for the handler that deals with mouse wheel scrolling in the List class and VerticalLayout class to override but I cannot find it.
Is there another way I'm supposed to change this, or am I missing something?
The "delta" property of MouseEvent.MOUSE_WHEEL defines how many lines will be scrolled by one wheel-scrolling. You could try changing it in the MOUSE_WHEEL handler (during capture phase). For example the following code will scroll line-by-line:
protected function init(event:FlexEvent):void
{
list.addEventListener(MouseEvent.MOUSE_WHEEL, list_mouseWheelHandler, true);
}
protected function list_mouseWheelHandler(event:MouseEvent):void
{
event.delta = event.delta > 0 ? 1 : -1;
}
The "horizontalLineScrollSize" and "verticalLineScrollSize" properties determine how many pixels to scroll when the user selects the scroll bar arrows. The "verticalLineScrollSize" property also controls the amount of scrolling when using the "mouse wheel". The default value is 5 pixels.
The "horizontalPageScrollSize" and "verticalPageScrollSize" properties determine how many pixels to scroll when the user selects the "scroll bar track". The default value is 20 pixels.
More details: http://livedocs.adobe.com/flex/3/html/help.html?content=containers_intro_4.html