I have a div with a fixed height and overflow-y : scroll which I am loading via ajax. I'm currently looking for a possibility to scroll the content inside the div (using the mouse wheel) but without displaying the scroll bar. Can anyone help?
Another way is to use jquery.mousewheel : https://github.com/brandonaaron/jquery-mousewheel
On mouse wheel, compute scroll urself :
$('.toScroll').on('mousewheel',function(event, delta, deltaX, deltaY){
if(!$(this).attr('data-scrolltop')){
$(this).attr('data-scrolltop',0);
}
var scrollTop = parseInt($(this).attr('data-scrolltop'));
scrollTop += (-deltaY * lineHeight);
$(this).attr('data-scrolltop',scrollTop);
$(this).scrollTop(scrollTop);
});
I made a Fiddle as a demonstration :
http://jsfiddle.net/W2pZB/
The only problem is about the var-fixed line height.
You can do it by applying overflow:hidden and after display-none on the scroll-bar using css
And here you can find a same thing in below question .
jQuery: How do I scroll the body without showing the scroll bar?
Related
I want to write an Jquery or JS script to scroll down a given page if it has the vertical scrollbar. This is to automate the web page navigation using the mouse wheel, so I should be able to animate it with time.
I was reading the web but seems that to do something like this you need to know an element name. Is it possible without knowing any element name? Something like $(document).scrollDown(speed)?
You could animate scrollTop property of html and body elements, like this:
$(window).load(function() {
$("html, body").animate({ scrollTop: yPosition }, 1000);
});
In this snippet, yPosition represents the height you want to reach, and 1000 controls the speed.
To detect if the page has a vertical scroll bar you could do:
if((document).height() > (window).height())
{
$('html').animate({scrollTop : ((document).height()},'slow');
}
I created this javascript function which disables the scrolling of the page content when the side menu is shown: (like a fb on mobile app)
function disableScroll(){
var top = $(window).scrollTop();
var left = $(window).scrollLeft();
$('body').css('overflow', 'hidden');
$(window).scroll(function(){
$(this).scrollTop(top).scrollLeft(left);
});
}
However, whenever I try to scroll the side menu, the page content shows the scroll bar moving up and going back to its original position. How do I prevent that from showing cos it looks really ugly.
I tried fixed the scroll position using CSS but it will automatically bring my page to the top which is not what i want. i want it to stay at the position where the user last clicked the button for the side menu to appear.
You should also set overflow: hidden to the body element.. Then the scroll bar won't be shown at all. Return it back to the original overflow afterwards.
JQUERY
$('body').delegate('#element', 'click', function() {
$("body").css('overflow', 'hidden');
});
This could maybe fix your problem?
I am creating a timeline interface using jQuery and CSS. I am using jScrollPane for scrolling it.
I have
parent div which wraps all the div and on which jScrollPane is applied
header div should be fixed while scrolling vertically, but scroll when scrolled horizontally and
leftpane div should be fixed while scrolling horizontally, but scroll when scrolled vertically
Sample Image
JSFiddle Link : http://jsfiddle.net/gACZ8/4/
Any ideas?
You can use jscrollpane events.
Demo: http://jsfiddle.net/gACZ8/10/
$(document).ready(function() {
$('#parent')
.bind('jsp-scroll-y',
function(event, scrollPositionY, isAtTop, isAtBottom) {
$(".header").css("top", scrollPositionY);
}
)
.bind('jsp-scroll-x',
function(event, scrollPositionX, isAtLeft, isAtRight) {
$(".lefter").css("left", scrollPositionX);
}
)
.jScrollPane();
});
Also you should add position:relative to both divs (to move them with top/left without moving other blocks) and z-index to header (to make it overflow sidebar).
http://jsfiddle.net/gACZ8/11/
You need to look at the scroll positions of .jspPane which is the div jsScroll creates, and offset the positions of your divs.
$(document).ready(function() {
$('#parent').jScrollPane();
$('#parent').on('scroll', function(){
var jspPane=$(this).find('.jspPane');
$('.lefter').css('left', 0-parseFloat(jspPane.css('left')));
$('.header').css('top', 0-parseFloat(jspPane.css('top')));
});
});
NB your header and leftcol need to be positioned absolutely otherwise they'll push the page contents with them, which means your page has to have margins that avoid these divs, and you need to take care of your z-indexes.
EDIT
Or use jscrollpane events (see other answer). I have never used jscrollpane before!
After dabbling in Chrome Extensions I've noticed that when the data inside the Page Action gets to a certain point the scroll bars automatically attach themselves to the popup, this I expect. However, instead of pushing the content to the left of the scroll bar it overlays the content causing a horizontal scrollbar to become active. I ended up just adding a check on my data and applying a css class to push the content to the left more to run parallel to the scroll bar and beside it not under it. What is the correct way to handle this besides my hackish solution?
I was wondering this myself too. Currently I just don't put anything important closer than 20px to the right side of a popup and disable horizontal scrollbars:
body {overflow-x:hidden;overflow-y:auto;}
So when a vertical scrollbar appears the content at least doesn't jump.
Perhaps you need to specify a width on the scrollbar.
::-webkit-scrollbar {
width: 42px; //Do not know actual width, but I assume you do
}
I haven't found a way to do this that isn't a hack, but here's the simplest hack I could think of:
<script type="text/javascript">
function tweakWidthForScrollbar() {
var db = document.body;
var scrollBarWidth = db.scrollHeight > db.clientHeight ?
db.clientWidth - db.offsetWidth : 0;
db.style.paddingRight = scrollBarWidth + "px";
}
</script>
...
<body onresize="tweakWidthForScrollbar()">
The idea is to detect whether the vertical scrollbar is in use, and if it is, calculate its width and allocate just enough extra padding for it.
I have a page layout with an inner <div id="content"> element which contains the important stuff on the page. The important part about the design is:
#content {
height: 300px;
width: 500px;
overflow: scroll;
}
Now when the containing text is larger than 300px, I need to be able to scroll it. Is it possible to scroll the <div>, even when the mouse is not hovering the element (arrow keys should also work)?
Note that I don’t want to disable the ‘global’ scrolling: There should be two scrollbars on the page, the global scrollbar and the scrollbar for the <div>.
The only thing that changes is that the inner <div> should always scroll unless it can’t be moved anymore (in which case the page should start scrolling).
Is this possible to achieve somehow?
Edit
I think the problem was a bit confusing, so I’ll append a sequence of how I would like it to work. (Khez already supplied a proof-of-concept.)
The first image is how the page looks when opened.
Now, the mouse sits in the indicated position and scrolls and what should happen is that
First the inner div scrolls its content (Fig. 2)
The inner div has finished scrolling (Fig. 3)
The body element scrolls so that the div itself gets moved. (Fig. 4)
Hope it is a bit clearer now.
(Image thanks to gomockingbird.com)
I don't think that is possible to achieve without scripting it, which could be messy, considering the numerous events which scroll an element (click, scrollwheel, down arrow, space bar).
An option could be using the jQuery scroll plugin. I know it has the availability to create scrollbars on an div. The only thing you need to add yourself is the logic to catch the events when keyboard buttons are pressed. Just check out the keycodes for the arrow keys and make the div scroll down.
The plugin can be found here.
You can use it like this;
<script type="text/javascript">
// append scrollbar to all DOM nodes with class css-scrollbar
$(function(){
$('.css-scrollbar').scrollbar();
})
</script>
here is a solution that might work: (fiddle: http://jsfiddle.net/maniator/9sb2a/)
var last_scroll = -1;
$(window).scroll(function(e){
if($('#content').scrollTop());
var scroll = $('#view').data('scroll');
if(scroll == undefined){
$('#content').data('scroll', 5);
scroll = $('#content').data('scroll');
}
else {
$('#content').data('scroll', scroll + 5);
scroll = $('#view').data('scroll');
}
/*
console.log({
'window scroll':$('window').scrollTop(),
'scroll var': scroll,
'view scroll':$('#view').scrollTop(),
'view height':$('#view').height(),
'ls': last_scroll
});
//*/
if(last_scroll != $('#content').scrollTop()){ //check for new scroll
last_scroll = $('#content').scrollTop()
$('#content').scrollTop($('#content').scrollTop() + scroll);
$(this).scrollTop(0);
//console.log(e, 'scrolling');
}
})
It is a bit buggy but it is a start :-)
The only way I believe you can achieve this is through the use of frames.
Frames - W3Schools Reference
If you just want to have a fixed positioned "div" and scroll only it, maybe you could use a trick like:
http://jsfiddle.net/3cpvT/
Scrolling with mouse wheel and all kinds of keys works as expected. Only thing is that the scrollbar is on the document body only.
I found a solution... Not perfect... http://jsfiddle.net/fGjUD/6/.
CSS:
body.noscroll {
position: fixed;
overflow-y: scroll;
width: 100%;
}
JS (jQuery):
if ($("body").height() > $(window).height()) {
var top;
$('#scrolldiv').mouseenter(function() {
top = $(window).scrollTop();
$('body').addClass('noscroll').css({top: -top + 'px'});
}).mouseleave(function() {
$('body').removeClass('noscroll');
$(window).scrollTop(top);
});
}
The text wrapping problem can be solved putting the whole content in fixed-width div. There is another bug for IE browser. If the page has center-aligned backgrond, it will move left-right on mouseenter on #scrolldiv