I have a wrapper div which includes several children all of which are 100%/100vh height. I want the scrollwheel to stop at each child element so that the user won't be able to use the mousewheel to scroll at the end of the page bypassing some of the child elements.
Any help should be appreciated.
You can try scroll-snap-type and scroll-snap-stop:always but im not sure if you are looking for that or to completely disable scrolling at certain child element.
Related
I'm trying to create a custom polymer 1 component with a bwu_datagrid inside of it. This component can be resized on-demand, I've seen the "e11_autoheight" and "e12_fillbrowser" examples, but I don't want to rely on "100vh", nor force the parent div to grow to show ALL rows.
Is there a way to permit the datagrid to grow when a parent div is resized but continue to keep the scrollbar if the parent div is smaller than the # of rows?
Any guidance is highly appreciated.
I use for example
dom.window.onResize.listen((dom.Event e) => grid.resizeCanvas(e));
See https://github.com/bwu-dart/bwu_datagrid/blob/44215176ca3443d76b1a0573a25186e97ca7f207/example_/lib/e12_fillbrowser/app_element.dart#L86
There might be other reasons for the container to resize than a resized window , but there is no way to get resize events from elements (at least not from all browsers).
In this case you have to find other means to invoke this code. For example if you have a splitter component, you would get some drag events or similar.
Vaadin 7.6.2
It appears when you attempt to scroll within a ComboBox, the listing moves a page at a time instead of smoothly scrolling up or down one line at a time, I'd prefer it scroll smoothly one line at a time instead of paging. This possible?
It is not possible with this version of component. But ComboBox have filtering functionality which is useful when you have a lot items in a list.
Probably, solution is to create your own widget.
I have a ons-page element that I want to customize the scrolling for. There are a few things I'd like to achieve, but mostly I want to understand what's going on.
By default, the page has -webkit-overflow-scrolling: touch. This is undesirable for two reasons:
The area "behind" the page shown during overflow is just plain white
I have no hooks to take action on over scroll. I'd like to add pull to refresh mechanics.
I've tried working with iScroll, but the behavior I'm seeing is that if I declare my scrollable element to be inside of the page, it calculates the full element height as the visible height. If I declare my scrollable element to be the page, I can move the page around, but not the content within the page.
I'm guessing some of this is related to "using native scrolling where it can", but I don't really understand how that's implemented, so I'm not really sure.
Any ideas?
Onsen UI doesn't support pull-to refresh as default.
How about using this library?
https://github.com/mgcrea/angular-pull-to-refresh
This is a library for angularJS.
P.S
Now Onsen UI support pull-to-refresh. http://onsen.io/reference/ons-pull-hook.html
I'm using Jquery mobile and doing some custom stuff.
The default collapsible object just seems to 'show' the hidden content instantly, which I find a bit user unfriendly. A few problems occur with this in that if the button is at the bottom of the screen, and the hidden content is off screen, then the user might not know that anything has even happened.
In my mind two things should happen.
The content should slideDown().
I should have the option to have the page scroll down so that the button finds itself at the top of the screen, in doing so guaranteeing the the previously hidden content is visible.
Any pointers in how I might go about doing either of these?
If I understood you correctly you are talking about a collapsible content block and when a user taps on the header it should scroll down a bit so that the body part is shown to the user.
You can do it by attaching a click event to the header that triggers a scrolling. In the code below I have done it as an animation. I also have adjusted the scroll position with -40px so that the user still sees some part of the elements that are on top of the header.
$('.ui-collapsible-heading-collapsed').on('click.scrollintoview', function (event) {
$('body').animate({ scrollTop: $(event.target).offset().top - 40}, 500);
});
When you are dragging an element using the touch events (DnD on touch screens), how do you detect that the object that you are dragging is over another object?
With jQuery is easy, add "collide: 'block'" or "collide: 'flag'" when you create a draggable.
http://plugins.jquery.com/project/collidable
I haven't found any direct solution for this. One can have draggable element positioned "outside" dragging finger, but this didn't work in my case.
In my case, I had a grid-like element with fixed size child elements. Therefore it was easy to compare pageX/pageY of touchmove to the parent element and count the current element index by dividing the result with their dimensions.