Im using Iscroll.js for a project that requires all elements to fit the height of the screen with a large horizontal scroll. My issue is there are certain elements that overflow vertically depending on the amount of content they have.
I have used "overflow-y: scroll" on these elements and it works fine on desktop browsers but not on mobile.
I have tried the webkit prefix -webkit-overflow-scrolling: touch but that also does not work.
the css for my vertical scroll elements is:
white-space: nowrap;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
You can find the site at http://govanhillpeopleshistory.com/dev/
For anyone that interested I managed to fix this by reverting to IScrolll = and using multiple nested scrollers inside my main scroller. Used a similar solution to this question.
Basically create an array to hold all of your IScroll objects, iterate over every element you want to be scrollable, grab its ID and and then create a new array element and Iscroll Object using the ID you Grabbed. Heres my code:
articleBottomState.find('.cards-wrapper').each(function(){
$(this).find('.content-card').each(function(){
//console.log(counter++);
var currentCardID = '#' + this.id; //Get Scrollable Areas ID
console.log(currentCardID);
//Add another array element to the myscrollers array
myscrollers[vertScrollCOunter++] = new IScroll(currentCardID, {
scrollX: true,
scrollY: true,
mouseWheel: true,
momentum: false
});
});
});
Related
with WooCommerce 4.2, on iOS, FlexSlider (v2.7.2) show a bug with a horizontal slider: when the focus is on the slider as the user swipes left or right, the vertical scroll is still active, there is some level of vertical movement. That makes the slider "rebound".
You can see the bug in this video: https://youtu.be/bM8zcv3ciTo
EDIT: My question is similar to this one, but related to Flexslider.
I have this in functions.php:
/*PRODUCT PAGE FlexSlider Options*/
add_filter( 'woocommerce_single_product_carousel_options', 'filter_single_product_carousel_options' );
function filter_single_product_carousel_options( $options ) {
if ( wp_is_mobile() ) {
$options['controlNav'] = true; // Option 'thumbnails' by default
$options['direction'] = "horizontal";
$options['slideshow'] = false; // Already "false" by default
}
return $options;
}
Any idea how to prevent this vertical scroll while the focus is on the Flexslider?
Anybody also has this bug?
I installed a test site with only Wordpress and WooCommerce, and the bug is here, so it's not plugin-related: http://woo.makemy.biz/produit/produit-de-test/
Edit: Adapting the owl carousel solution would result in code that looks like this:
//You should replace ".myFlexslider" with an appropriate class.
jQuery('.myFlexslider').data('flexslider').vars.before = function(){
jQuery('body').css('overflow', 'hidden');
};
jQuery('.myFlexslider').data('flexslider').vars.after = function(){
jQuery('body').css('overflow', '');
};
which should work. https://codepen.io/Terrafire123/pen/YzWRXOJ
It's not possible to do this via PHP, because PHP doesn't expose the API necessary to do this.
You should know, that preventing vertical scroll when the slider swipes is usually discouraged because this can result in the slider being annoyingly difficult to scroll past.
Original answer: The fact that the issue seems to occur with both Flickity and Flexsider seems to indicate that it isn't a problem with either one, but rather with the user.
A careful review of the Youtube video you have seems to indicate it's working correctly, and there is no real bug. Every time the slider doesn't move in your video, it's because
a. He's sliding vertically, not horizontally, or
b. He's sliding in a direction he can't slide because loop is disabled and he's at the first element.
The rebound effect is normal when you scroll to the top of the page in iOS. If desired, you can disable the bouncing effect with a workaround like this:
html {
position: fixed;
height: 100%;
overflow: hidden;
}
body {
width: 100vw;
height: 100vh;
position:relative;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
I have a div with divs inside. The outer one has overflow-y: auto;, so with many internal items the right scrollbar appears. After doing $('#container').selectable(); when I press left mouse button over the scrollbar, it doesn't scroll, but a dotted frame for selecting is shown.
I have found this solution: JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows
Unfortunately, it doesn't work for me, because when I scroll to the bottom, the items stop being selectable. (Though the top ones continue). So, the question is: how make the scrollbar... mmm... a scrolling bar, without splitting the container into 2 divs.
Well, it seems to be all browsers problem: when you click on a scrollbar, a mouse event is fired. This is the real problem, jQuery UI just doesn't solve it. Let's fix it on our own in the jQuery UI .js file (not applied to the min version as it should be obfuscated AFAIK).
Add this condition
if (event.pageX > $(event.target)[0].clientWidth + $(event.target).offset().left)
return;
right after the
_mouseDown: function(event) {
I have seen a lot of such hacks with HasScrollbar() detectors, but don't get why didn't they just sum up client width (that is without scrollbar) and offset to make it relative to the document and compare with pageX. For me it works perfectly.
Use a wrapper div for this , Its working fine for me.
.selectable-wrapper { border-radius: 5px; min-height: 200px; max-height: 200px; overflow-y: auto; border: 1px solid #D1D1D1;}
.selectable { list-style-type: none;padding: 5px;}
<div class="selectable-wrapper">
<ul class="selectable">
</ul>
</div>
I'm working on a widget that uses a sortable list and I'm stuck in this small issue arising when the container is scrolling. I don't want the <li> to go outside of the <ul>, so I set containment: "parent" when applying sortable to the list.
The containment works just fine when the container is not scrolling. But when it does, if an item is dragged to any of the ends of the list not displayed, the containment stops working as expected and the item moves beyond.
I'm not sure if I'm missing something of the sortable API, or this is just a jquery-ui bug. These are the options I have set:
$(".sortable").sortable({
axis: "y",
containment: "parent",
cursor: "move",
items: "li",
tolerance: "pointer",
});
The CSS of the container is as follows:
.list-holder {
max-height: 250px;
overflow-y: auto;
overflow-x: hidden;
}
This jsFiddle shows both cases, with and without scrolling.
Add this code to your ul
ul{
max-height: 240px;
overflow: hidden;
}
The element scrolls down because the actual list height is still present in the page even if it is not visible to us.
Here is the modified fiddle
please see this http://jsfiddle.[net]/Nkkzg/108/ (SO doesn't allow to like to JsFiddle) and write 'Apple' in auto-complete text box. You can see a long string appears and with that page's horizontal scroll bar also appear which is very annoying.
I want to show the full string as a result without setting the width, You can see autocomplete results div shows from the left corner to maximum right depending on string length. How can we show the results in the center of page like input textbox, so that horizontal scroll bar shouldn't appear.
Any help will be highly appreciated.
Thanks and Regards.
According to this article:
jQuery UI Autocomplete Width Not Set Correctly
It looks as though you need to place everything in a container and specify the appendTo property telling it where to put the menu.
You should try to use position:absolute
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
border:1px solid #222;
position:absolute;
}
Live Demo
You could try to put this in your .css file
span input.ui-autocomplete-input {
width: 100%;
}
In that way the autocomplete get's the width you have style it to according to the styleClass that is on the enclosing span tag
I'm building an iOS app with PhoneGap. I'm using translate3d CSS animations to create the 'flip' effect.
This works great on simpler elements...a DIV with front/back divs and maybe an extra span or two.
But when I attempt to flip a larger element...namely the entire screen, I get redraw glitches. What happens as soon as I swap the css class to start the transition, parts of the 'bottom' div pop-through the 'top' div, then the flip happens, then they pop-out again. And it's not the entire element that shows through...it's half of the element split along the axis that I'm doing the translate 3d rotation on.
Any ideas or theories as to what might be causing this? It happens the same both on the iPad as an app and on the desktop in Safari, so appears to be a webkit issue.
Could it be some CSS issues? Or is attempting to do a full-screen translate3d rotation with complex nested elements with large background images just more than Safari can handle?
UPDATE 1:
I've made progress in narrowing down the issue.
What's happening is that the elements that are 'peeking through' when I do the translate3d flip happen to be child elements that had been previously positioned via translate3d.
My 'page' structure that I want to transition with translate3d:
<div id="frontbackwrapper">
<div id="front">
</div><!--/front-->
<div id="back">
</div><!--/back-->
</div><!--/frontbackwrapper-->
This works on it's own. The front div is replaced with the back div with a card-flip effect.
The problem is that prior to doing the full page flip, I've already animated some elements within the #front div using translate3d:
<div id="frontbackwrapper">
<div id="front">
<div class="modal"></div>
</div><!--/front-->
<div id="back">
</div><!--/back-->
</div><!--/frontbackwrapper-->
Example CSS:
.modal {
width: 800px;
height: 568px;
position: absolute;
left: 112px;
z-index: 100;
-webkit-transition-duration: 1s;
-webkit-transform: translate3d(0,-618px,0); /* set off screen by default */
}
.modal.modalOn {
-webkit-transform: translate3d(0,80px,0); /* slides the div into place */
}
If--instead of using translate3d--I just reposition the div with a top style or transform the top property, I don't get the peek-through issue. Of course, that means I have to give up the slick animation or hardware acceleration, respectively.
At this point, it looks like a webkit bug. I'll keep doing some playing with it. If anyone has run into this before and found a workaround, I'm all ears!
solution! After a night of sleep, I mulled over the culprit and what to do with it. It's not necessarily the act of animating a child element with translate3d but rather the face that the element that was translated has that CSS property at the time it's parent is being animated with translate3d.
The fix is to first animate the child element, then remove the translate style all together.
The CSS structure is now:
/* default class for the start of your element */
.modal-startposition {
-webkit-transition-duration: 1s;
-webkit-transform: translate3d(0,-618px,0);
}
/* add this class via jQuery to then allow
webkit to animate the element into position */
.modal-animateposition {
-webkit-transform: translate3d(0,80px,0);
}
/* when animation is done, remove the above class
and replace it with this */
.modal-endposition {
top: 80px;
}
And some sample jQuery:
//[attach a click event to trigger and then...]
$myModal
.addClass("modal-animateposition")
.on('webkitTransitionEnd',function () {
$myModal
.removeClass('modal-startposition')
.removeClass('modal-animateposition')
.addClass('modal-endposition');
});
A little tedious, but it completely fixes the screen redrawing problem.
EDIT: Corrected a typo
DA,
I learned something from this, thanks. Also,
take note of the css attrbibutes, 'translate3d' and 'left'. Translating and positioning is a little different. Test it out, translate an element 100px in x-axis, set it's 'left' style attribute to 0px. Verify, it will be positioned at 0px on x-axis from the current translation point (starting from 100px on x-axis).
That produces mathematical errors in drag/drop and animation algorithms and easily noticed (redraw glitches, skips, position getting reset), and becomes a challenge because translate3d no longer updates the elements offsetLeft or 'left' style attribute (to prevent reflow, for optimization), so parsing the elements real left, is based on knowing if translate3d or left was being used. If you're a game developer, tracking the x,y in internal variables is the way to stay in synch with the elements position. Hope that helps out more.