When I created navbar on my project I noticed that I can scroll on the website
and what I decided to do is to can noscroll function when the user will open navbar
function noscroll() {
window.moveTo(0, 0);
}
function menutoggle() {
if (menuItems.style.maxHeight == '0%') {
menuItems.style.maxHeight = '30%';
window.addEventListener('scroll', noscroll);
} else {
menuItems.style.maxHeight = '0%';
// How can I unable to scroll here?
}
}
one solution can be:
while nav is open wrap it with another div and then make that div position absolute. Hence it will be outside of the document flow. then give it a height of 100vh width 100vw. After that place, your main nav bar as you like inside the parent div.
This would work I suppose:
function noScroll() {
window.scrollTo(0, 0)
}
window.addEventListener('scroll', noScroll)
Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even
if you do not need it):
overflow: scroll;
use of overflow
Related
I would like to draw a <div> box with fixed height, width and scrollbars and register the location of the scrolled view. I have found the function scrollTop but don't know how to get the bottom scroll location.
Which CSS do I need to draw the box with scrollbars?
How can I access the left, right, top and bottom position inside (relative to) the box with Javascript?
I would use these 4 numbers to draw a <div> inside.
Starting with your second question:
scrollTop is the vertical position (in px) of the scrollbar, relative to the top position. So if your scrollbar is at the very top, scrollTop = 0.
It's the same for scrollLeft, but horizontal.
You can set these values via js to bring the scrollbar to a certain position programmatically.
So, if you want to know when the scrollbar is on top, you simply register an event listener for scrolling and wait for scrollTop = 0.
To check if the scrollbar is at the very bottom, you need a bit of calculation since you need to know the scroll height of the container (scroll height - scrollTop = 0).
See the following code (using jquery but it also works with plain js) which fires an event when the scrollbar reaches start or end position (this is for horizontal scrolling, so you have to replace "left" with "top" and "width" with "height"):
$('#yourDivId').on('scroll', function () {
if (scrollbarIsAtStart($(this))) {
$(document).trigger("scrollbar.left");
}
if (scrollbarIsAtEnd(this, $(this))) {
$(document).trigger("scrollbar.right");
}
})
const scrollbarIsAtStart = (jQuery) => {
if (jQuery.scrollLeft() == 0) {
return true;
}
return false;
}
const scrollbarIsAtEnd = (e, jquery) => {
//Minus one, probably rounding issue!?
if (jquery.width() + jquery.scrollLeft() >= e.scrollWidth - 1) {
return true;
}
return false;
}
So there are two events triggered, one for the scrollbar reaching start position, one for the end of the container. Now, you can listen to these events and handle them:
$(document)
.on('scrollbar.left', {}, function (event) {
//do whatever you want to do
})
Regarding your first question, I'm not a css expert, but if I look at bootstraps table-responsive class (which enables horizental scrolling), it looks like this:
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
Vertical scrolling is enabled by default if you define a fixed height on your div and the data exceeds this size. You can of course override the width with a fixed value or a different percentage.
So I have a product page where the description is a fixed element relative to the viewport. However, when scrolling all the way to the bottom, the element will overlap with the footer content and it doesn't look good.
What I'm trying to do is to use jQuery to determine the exact point where the bottom of the description element starts to overlap with the top of the footer element, and to change it to absolute position with a bottom equal to the position of the footer element. The result I want is so that it "sticks" to the top of the footer when it would otherwise overlap it.
Here's my code:
$(window).scroll(function() {
//offset of bottom of element from top
var osProduct = $('.product-single__meta').offset().top + $('.product-single__meta').height();
//exact position where footer begins
var osFooter = $('.return-link-wrapper').offset().top - 83;
if(osProduct >= osFooter) {
//change fixed positioning to be sticky to that exact pixel
$('.product-single__meta').css('position','absolute');
$('.product-single__meta').css('bottom', osFooter);
}
else {
$('.product-single__meta').css('position','fixed');
$('.product-single__meta').css('bottom','auto');
}
});
.product-single__meta is the description div, and .return-link-wrapper is the footer div.
However, when I scroll past this overlapping point, the description div starts to really quickly switch between fixed and absolute positioning, rather than behaving how I want it to. Needless to say, the end result is not as expected. How can I achieve this behavior?
I believe this is the code you're looking for set 100 to whatever you have where your div element is distant exactly from top of the page. change rest to your needs. this is in jquery btw
(function ($) {
$(document).ready(function(){
// first we set the position to relative
$('.product-single__meta').css('position','relative');
// position absolute when user scrolls more than 100px
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before setting css
if ($(this).scrollTop() > 100) {
$('.product-single__meta').css('position','absolute');
} else {
$('.product-single__meta').css('position','relative');
}
});
});
});
}(jQuery));
I have a scrollable div with and arrow above and an arrow below. What I am trying to do is to make the arrow above appear after the div has reached a certain height.
here is the code that I have...
$("#scrolldivup").hide();
$(.section).scroll(function(){
if($(.section).scrollTop()>1){
$("#scrolldivup").fadeIn();
}
else
{
$("#scrolldivup").fadeOut();
}
});
".section" is the scrollable div So as soon as it scrolls more than 1 pixel I want the "#scrolldivup" to appear which by the way is an anchor tag.
Can anyone see how my code is wrong?
Try this
$("#testdiv").hide();
$(".section").scroll(function(){
if($(".section").scrollTop()>1){
$("#scrolldivup").fadeIn();
}
else
{
$("#scrolldivup").fadeOut();
}
});
$(.section)
should be
$('.section')
I'm using javascript to have a sidebar stay visible as the page scrolls. the side bar only becomes fixed once the page scrolls to the top of its container. here is the code:
<script>
function moveScroller() {
var a = function() {
var b = $(window).scrollTop();
var d = $("#featured-scroller-anchor").offset({scroll:false}).top;
var c=$("#featured-scroller-content");
if (b>d) {
c.css({position:"fixed",top:"5px"})
} else {
if (b<=d) {
c.css({position:"relative",top:""})
}
}
};
$(window).scroll(a);a()
}
</script>
This works great except that I also have a footer at the bottom of the page that I want to be visible infront of the sidebar. Currently the sidebar is displayed above the footer and I can't figure out how to change that.
I have the footer with a z-index of 999 and I tried setting the z-index of #featured-scroller-content to something less but that didn't work. the only thing that will work is if I set the z-index of the sidebar to -1 but then none of the links in the sidebar work anymore.
Does the footer have position: relative?
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