I have example at
$(function () {
$('#scroller').slimScroll({
height: 600,
});
});
[codepen](https://codepen.io/anon/pen/xyyoPe)
My problem is that i cant get the scroll to work with the mouse wheel and slimscroll in this example. I dont know if the css is the issue or if the whole div setup is wrong.
Related
I created a floating sticky bootstrap panel at the bottom right of the screen. It look like a chat support like intercom. When I'm scrolling on the panel the body will scroll too. And it's really weird when I'm scrolling on mobile because I display the panel in full screen and we can scroll on the body while the panel is in fullscreen.
So I put pieces of code in my JS to enable / disable the body scrollbar :
if (...) {
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'scroll');
}
...
It works and it's overkill I think but I don't found better. But I have another problem. If I go on my mobile the chrome address bar will be hide when I scroll on the full screen panel and it's really ugly because the panel will be redrawed every time.
Do you know a better way to disable body scrolling when the cursor is on certain element (a magic css property ?) and disable auto hiding address bar of browsers ?
If you go on intercom with your mobile it's exactly what I want.
if you need to totally enable or disable scroll you must use this way:
if (...) {
$('html, body').css({ overflow: 'hidden', height: '100%' }); // to hide
} else {
$('html, body').css({ overflow: 'auto (or) scroll', height: 'auto' }); // to show
}
you must include html as just only body is not enough. Hope it helps.
So what I want to know is how can I scroll the page down smoothly as I resize a div past the bottom of the browser.
So far what I have set up is that when you resize the div and it gets to the last 30px of of the browser, it starts to scroll the page down. That part works, but it's jerky when doing so.
My code:
// $maxHeight is set above this, it just takes all the elements within the div and and get's the total height and set that as maxHeight
$('.notifications-drop-down').resizable({
maxHeight: $maxHeight,
minHeight: 400,
handles: {
's': '.ui-resizable-s'
},
resize: function(event, ui){
if((ui.position.top + ui.size.height) > ($(window).scrollTop() + $(window).height() - 30)){
$(window).scrollTop($(window).scrollTop()+10);
}
}
});
What I tried to fix this:
Adding an animate function to the scrollTop to make it smoother
$('html,body').animate({scrollTop: $(window).scrollTop()+30}, 200);
But that does not work smoothly. I have changed the animation duration and it's still not smooth. Does anyone know what I can do it get this to be smooth?
Something I noticed was that when the page scrolls down it does not recognize that the div is in the bottom 30px so it's not recalculating if it should scroll down more (you need to wiggle your cursor while resizing the div for it to work), I did try and add the same code for scrolling down to the resizable's stop function but that didn't help as well.
Thanks for the time.
So, I'm using the fullPage.js to create a one page style site. I decided I wanted to add some animations, however not having any knowledge of jQuery, I decided to opt for animate.css and WOW.js to go with it.
As I understand, however, fullPage.js removes the scrollbar and so WOW.js can't see when I've scrolled past a point. so I used
scrollBar: true
and
body,html{
overflow: hidden !important;
}
to remove the scrollbar. This method works, however for some reason the animation when I'm scrolling to the first section (top of the page) is gone. I still get the animation when scrolling down. How can I fix this? (GIF: http://i.imgur.com/pom46OF.gifv)
EDIT: here's the site by the way - https://farooq.gq/portfolio/#top
The anchor option seems to mess with animations, remove it. And also make sure you initialize wow on section or slide leave:
JS:
$(document).ready(function() {
$('#fullpage').fullpage({
'navigation': true,
'navigationPosition': 'right',
navigationTooltips: ['Top', 'Who Am I?'],
scrollBar: true,
onLeave: function(){
new WOW().init();
}
});
});
Codepen: http://codepen.io/leonlaci/pen/WxoNqN
I'm trying to customize the w2ui sidebar's scrollbar with JScrollPane jQuery plug-in, but I fail all the times and by saying that I mean that I couldn't make JScrollPane to change the sidebar scrollbar style. So, could you please share snippet code here that shows how to get it done ?
Thanks.
It is what I've tried:
$(w2ui['sidebar'].box).find('.w2ui-sidebar-div').jScrollPane({
horizontalGutter:5,
verticalGutter:5,
'showArrows': false
});
Well, I tried several libraries and at the end 'slimScroll' was actually the one which worked perfectly :
onRefresh: function(event) {
event.onComplete = function () {
$('.w2ui-sidebar-div').slimScroll({ height: '100%' });
}
}
First, how to make this function run ONLY on scroll? Second, how to loop/repeat this function ONLY on window scroll infinitely?
$(function(){
$(".media-nav2").transition(
{ y: -600 }, 1500,
'cubic-bezier(.69,.19,.35,.83)');
});
I'm using the above function with this plugin https://github.com/rstacruz/jquery.transit.
Here is my webiste http://dev1.envisionwebdesign.co/johnreid/campaign.html. It's a one page parallax with no scroll bars. You navigate using the top menu and mouse/touch scroll. If you check this link http://dev1.envisionwebdesign.co/johnreid/campaign.html, you can see that the div .media-nav2 immediately transitions when the page loads.
Basically I'm trying to create a parallax effect where when you scroll down to the next page/section, the div .media-nav2 scrolls up. Here's a link to the fiddle http://jsfiddle.net/newmedia85/92YgR/. I have included a link to the onepage parallax jquery for the entire site. The way the one page parallax works is making it really hard for me to solve this. Any help appreciated!
use jquery scroll function
$(window).scroll(function () {
$(".media-nav2").transition({
y: -600
}, 1500, 'cubic-bezier(.69,.19,.35,.83)');
});