I'm using .mousewheel to translate my downwards scroll into horizontal scroll on desktop, however for mobile I want to disable this behavior. I have tried the following:
if ( $(window).width() > 480) {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * -0.5);
e.preventDefault();
});
}
else {
$("html, body, *").bind("mousewheel", function() {
return false;
});
}
But no success, the horizontal scrolling works fine but the body content is still locked in place on mobile.
To get the viewport width:
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
Then you can just make a small change to your if statement:
if (viewportWidth > 480) { ... }
Full code example
This includes a little "fix-up" with the way that the scroll translation was happening - I couldn't get the previous way to work.
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (viewportWidth > 480) {
$('body').mousewheel(function(e) {
$(this).scrollLeft($(this).scrollLeft() - e.deltaY);
e.preventDefault();
});
} else {
$("body").on("mousewheel", function() { return false; });
}
Related
I have done topbar sticky on desktop view with the help of Jquery but I don't want a sticky top bar on a mobile screen during scroll.
I did topbar sticky with this code:
$(document).ready(function(){
$(window).scroll(function(){
var sticky = $('#top-header'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});
});
You should modify your condition statement:
if ((scroll >= 100) && ($(window).width() > /* Mobile screen width */)) {
sticky.addClass('fixed');
}
You can add media query using css or you can define screen width for your jQuery code.
if($(window).width() > 767){
$(document).ready(function(){
$(window).scroll(function(){
var sticky = $('#top-header'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});
});
}
use this code and you also need one more condition for mobile device width. using this code you can remove the "fixed" class on resize also.
$(document).ready(function(){
$(window).on('scroll resize',function(){
var sticky = $('#top-header');
var scrollTop = $(document).scrollTop();
var windowWidth = $(window).width();
if(scrollTop >= 200 && windowWidth >= 768){
sticky.addClass('fixed');
}else {
sticky.removeClass('fixed');
}
});
});
I'm trying to run a scroll function on desktop. I perform calculations to position a block on the page according to the user's screen size.
I'm looking in all directions, I do not see how to do that when I resize the size of the screen the function is restarted.
methods: {
handleScroll: function() {
let hW = $(window).height();
let WW = $(window).width();
let position = $(window).scrollTop();
$(window).scroll(function() {
let scroll = $(window).scrollTop();
if (
scroll > position
&& WW >= 768
){
// thing...
console.log('down');
} else if(
scroll < position
&& WW >= 768
// thing...
){
// thing...
console.log('up')
}
position = scroll;
});
}
},
mounted () {
this.handleScroll();
}
I have a problem with this code.
This code is checking the resolution of mobile device and open a web page with same resolution. But When I open a page from the mobile device with display width less than 480px and I scroll, the page is not viewed correctly. I want to drop this code for devices with display width less than 480px.
Can you help me?
JavaScript
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 200,
header = document.querySelector("nav");
if (distanceY > shrinkOn) {
header.setAttribute("id","smaller");
} else {
header.removeAttribute("id","smaller");
}
});
}
I dont want: 480px width id smaller to be added.
If I understand you correctly, you want this line of code: header.setAttribute("id","smaller");
to be only executed if the width is greater then 480px. If this is the case, try the following:
var width = document.body.clientWidth;
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 200,
header = document.querySelector("nav");
if (distanceY > shrinkOn) {
if (width > 480) {
header.setAttribute("id","smaller");
}
} else {
header.removeAttribute("id","smaller");
}
});
}
I would like to animate a div when user scrolls the page.
For that, i implemented this code:
var slide = jQuery(".apresentacao-spc-01");
var opening = false;
var closing = false;
var pos = jQuery(window).scrollTop();
jQuery(window).scroll(function() {
var pos = jQuery(window).scrollTop();
console.log(pos);
if (pos > 100) {
if (!opening) {
opening = true; closing = false;
slide.stop().animate({
'opacity': 1,
'margin-left': '0px'
}, 700, function() {
opening = false;
});
}
} else {
if (!closing) {
closing = true; opening = false;
slide.stop().animate({
'opacity': 0,
'margin-left': '-1000px'
}, 500, function() {
closing = false;
});
}
}
});
The issue is:
Using "if (pos > 100) {", if the user resolution is big enough to show the element before he needs to scroll, he won't see the element unless he begins to scroll the page.
My question is:
How can I get a scroll animation that will be executed when the element is visible?
I mean: If the element is visible on page load, the animation automatically starts... If the element is not visible on page load, the animation waits the scroll reach the element to start...
Thanks.
There a few different things you could do. My first thought was to query the height of the viewport with something like this:
var viewportWidth = document.documentElement.clientWidth
, viewportHeight = document.documentElement.clientHeight
And then trigger the animation if it is taller than the distance the element is down.
A more dynamic solution would be to use a function that checks to see if the element is in viewport the automatically, that way you wouldn't need to worry about adjusting the height if you changed stuff on your page:
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
credit to this response.
There is a use guide and further information in the link provided.
Good luck!
I have a function that detects the window width and based on that does jquery things that mobile would have and does jquery things for desktop. I have two functions, one that alters content resize and one on reload. What I am trying to do is combine the two into one function. The problem now is anything in the resize function just resizes. Even $("html").width();
Anyone have any ideas or solutions? Thanks.
//ON RESIZE
$(window).resize(function () {clearTimeout(this.id);this.id = setTimeout(checkTimer, 500);});
function checkTimer() {
var width = $(window).width();
//MOBILE
if (width < 640) {
mobileView();
}
//TABLET
else if (width > 640 && width <966) {
appendFix();
}
//DESKTOP
else if (width >966) {
appendFix();
}
};
//ON RELOAD
var width2 = $(window).width();
//MOBILE
if (width2 < 640) {
mobileView();
};
//TABLET
if (width2 > 640 && width2 <966) {
appendFix();
};
//DESKTOP
if (width2 > 966) {
appendFix();
};
Think I found the solution.
$(window).resize(function () {clearTimeout(this.id);this.id = setTimeout(mobileSize, 500);});
function mobileSize() {
sizes();
}
$(window).load(function() {
sizes();
});
function sizes() {
var width = $(window).width();
if (width < 640) {
}
else if (width > 640 && width < 966) {
}
else if (width > 966) {
}
}