This is a common issue I have found on Mobile. I have been unable to find a solid answer yet.
I won't accept the following as they don't work completely (tested):
Adding the following to the body and html tags
This does work but causes the page to jump to the top. You can break it in Safari if you turn landscape and get the browser toolbar to show on scroll
.noScroll {
height: 100%;
overflow-y: hidden;
}
Adding the following to the body tag
This does work but causes the page to jump to the top.
.noScroll {
height: 100%;
overflow-y: hidden;
position: fixed;
}
A combination of JS and CSS
You can break it in Safari if you turn landscape and get the browser toolbar to show on scroll. This method solves the jump issue
.noScroll {
height: 100%;
overflow-y: hidden;
position: fixed;
}
var body = document.body,
lastTop = 0,
startScroll,
stopScroll;
startScroll = function () {
body.style.top = '';
body.scrollTop = lastTop;
};
stopScroll = function () {
lastTop = document.body.scrollTop;
body.className = 'noScroll';
body.style.top = '-' + lastTop.toString() + 'px';
}
I have tried other methods but they don't work either. You can disable touchmove on the body tag but it does not allow you to scroll anywhere e.g.
document.body.addEventListener('touchmove', function () { return false; });
Is there anything I can do.
A JS scrollbar is the only proper fix at the moment.
Cheers
Related
On the website (please don't share), in WordPress, I set a sticky header using CSS
header#masthead {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 10000;
}
This works correctly. However, the image in the header is too big, that's why I resized it with an animation when scrolling down
jQuery(document).ready(function() {
jQuery(function() {
var $nav = jQuery('#masthead .custom-logo');
var height_original = jQuery('#masthead .custom-logo').css("height").replace("px","");
var height_small = height_original * 0.666;
var width_original = jQuery('#masthead .custom-logo').css("width").replace("px","");
var width_small = width_original * 0.666;
jQuery(document).scroll( function() {
var value = jQuery(this).scrollTop();
if ( value > 0 ){
$nav.stop().animate({height:height_small,width:width_small},100);
} else if (value == 0 ) {
$nav.stop().animate({height:height_original,width:width_original},100);
}
});
});
});
But, it doesn't work properly.
I primarily use Opera GX, where it behaves like this - when scrolling down, the animation is slowed down. Also, if you just scroll down a little, the animation doesn't run all the way and the image goes back to its original size, scrolling up works without a problem.
The strange thing is that I've also tried it in Firefox, Chrome and Edge. It behaves differently in everyone, but nowhere does it work 100% correctly.
What is wrong with the code please?
Thank you
I think instead of that long jquery code you can use this simple javascript code with some css to get the results you want:
I hope this helps you to reach what you looking for :)
JS
// Add a class to the header when scrolling
let header = document.querySelector('header');
window.addEventListener('scroll' , function () {
let window_top = this.scrollY;
if (window_top == 0) {
header.classList.remove('resize');
}else {
header.classList.add('resize');
}
});
CSS
/* these are the default styles (when the user doesnt scroll down yet) */
header#masthead {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 10000;
transition: .3s;
}
header#masthead img{
transition: .3s; /*here i added transition to give the image a smooth animation*/
}
/* these are the styles when the user scrolls */
header#masthead.resize img{
height: 50px; /* <=== here i gived the image a smaller size */
}
I created an input element, which contains a click eventlistener, that when it fires it runs a function, that makes an element visible by the css rule "display:block;".
This element contains the following rules:
.elementExample
{
display:none;
position: fixed;
top: 0;
left: 0;
z-index: 5;
width: 100vw;
height: 100vh;
background-color: white;
font-size: 1.3em;
overflow: hidden;
-ms-overflow: hidden;
}
In a few words, this element comes at the top of everything else, as I want this input element to be at the top of the mobile screen, as it runs an autocomplete function, for showing results that the user has to select.
Everything works great, I managed to do it, however what I am struggling is to make in iOS chrome and safari to stop any sort of scrolling on the entire page and only have a scrolling option within the results only, as when the user is in focus on an input box, the user can scroll down freely. This happens, only while the user is in focus. This is the relevent coding I tried to do it with:
html .inputHighlightText:focus
{
overflow: hidden!important;
-webkit-overflow: hidden!important;
-moz-overflow: hidden!important;
-o-overflow: hidden!important;
-ms-overflow: hidden!important;
}
this.preventDefault = function(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
this.disable_scroll_mobile = function(el = null){
if(el !== null) {
$(el).focus((e) => {
e.preventDefault();
});
}
$("body").css("overflow", "hidden!important");
$("#fullScreenBg").css("overflow", "hidden!important");
$(window).css("overflow", "hidden!important");
window.addEventListener('touchmove',$self.preventDefault, false);
document.addEventListener('touchmove',$self.preventDefault, false);
window.addEventListener('scroll',$self.preventDefault, false);
document.addEventListener('scroll',$self.preventDefault, false);
}
this.enable_scroll_mobile = function(){
$("body").css("overflow", "scroll");
$("#fullScreenBg").css("overflow", "scroll");
$(window).css("overflow", "scroll");
window.removeEventListener('touchmove',$self.preventDefault, false);
document.removeEventListener('touchmove',$self.preventDefault, false);
window.removeEventListener('scroll',$self.preventDefault, false);
document.removeEventListener('scroll',$self.preventDefault, false);
}
this.disable_scroll_mobile();
I tried everything. How do I stop iOS users from scrolling while they are in focus on input, unless if they scroll on the list that appears?
"all devices except iOS respect the overflow: hidden" - Will Po
Take a look on Will's great post about it:
https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177
I'm trying to emulate a nice scrollbar that i saw on the website https://doughellmann.com/blog/. (You must be on a screen bigger than 955px to view the sidebar) However, my sidebar is fixed and if it overflows in the y direction a side bar appears so on the screen you have two scroll bars - One for the sidebar and the other for the page. However, I don't want that. I want the user to go the bottom of the sidebar and then fix it self like it did on this webiste. Here's how my code looks right now
.sidebar{
display: block;
background-color: #1056b1;
width: 30%;
height: 100%;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: scroll;
}
.content-on-the-right{
margin-left: 31%;
}
Does anybody know how i could solve this problem using vanilla javascript or reactjs or even css if that's possible?
I'm sure there's a more efficient way to do this but I believe this will get you started on getting what you want. For this example, let's say your sidebar has an id of sidebar.
When the window loads, you can add an EventListener that will call a function that will check the elements offsets. You can take it from there:
window.addEventListener("scroll", DoScroll, false);
function DoScroll() {
var sidebar = document.getElementById('sidebar');
var sidebarHeight = document.getElementById('sidebar').offsetHeight;
var winHeight = window.innerHeight;
var offset = sidebarHeight - window.pageYOffset;
if (offset < winHeight) {
sidebar.style.position = "fixed";
sidebar.style.bottom = 0;
} else {
sidebar.style.position = "static";
}
}
Here's my JSFiddle that demos this.
P.S. I know the name of the function kinda sucks but am a bit burned out... you can give it a more descriptive name.
Hi I have been trying for the last hour to change the way the default scrollbar looks on browser.I am talking about the main scrollbar on the right not ading a new one and styiling it.I am using the jScrollPane plugin but it does not seem to work or I am not doing something right.Here is my code:
$("window").jScrollPane();
window
{
width: 100%;
overflow: auto;
}
window
{
height: auto;
}
If you go to the website that A.K. has linked, you will see the necessary Jquery and CSS for this to work. I have made them easier to understand for you.
$(function()
{
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function()
{
if (!isResizing) {
isResizing = true;
var container = $('#full-page-container'); //this should be the most parent
// div, right beneath the <body> and covering the entire page. Change the ID HERE.
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css(
{
'width': 1,
'height': 1
}
);
// Now make it the size of the window...
container.css(
{
'width': win.width(),
'height': win.height()
}
);
isResizing = false;
container.jScrollPane( //this is where outer scroll changes
{
'showArrows': true
}
);
}
}
).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#full-page-container').width() != win.width()) {
win.trigger('resize');
}
/*Internal scrollpanes. (Not needed if you want to change only the outer)
$('.scroll-pane').jScrollPane({showArrows: true});
*/
});
Now CSS:
html
{
overflow: auto;
}
#full-page-container
{
overflow: auto;
}
/*** Optional INNER scrolls.
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 200px;
}
***/
Don't forget to include Jquery, jscrollpane.css, mousewheel.js, jscrollpane.js
I'm using CodeMirror 2 editor. The trouble is that I can't make it fullsize (100%; 100%). I added to the main style:
.CodeMirror {
height: 100%;
width: 100%;
}
And this doesn't work for me in any browser. Any ways?
I'm using the following code in http://jsbin.com to stretch the CodeMirror frame (note that JS Bin in particular stretches to half screen width, but the example code below does "fullscreen"):
.CodeMirror {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I don't remember whether CodeMirror adds the class by default, but if it doesn't, you'll also want to add it in the JavaScript (assuming you've not solved this already):
CodeMirror.fromTextArea('ID_OF_TEXTAREA', {
// .. some other options...
iframeClass: 'CodeMirror'
});
You can't do that with CSS, instead you can use JavaScript:
window.onload = function() {
var oTextarea = document.getElementById("myText");
var oParent = oTextarea.parentNode;
oTextarea.style.width = (oParent.scrollWidth - 30) + "px";
oTextarea.style.height = (oParent.scrollHeight - 30) + "px";
};
This will set the size of the textarea based on its parent size.
Added some "padding" but you can remove or reduce it.
html, body, .container, .subContainer, .CodeMirror {
height: 100%;
width: 100%;
}
Should work as well.