Why are two vertical scrollbars showing? - javascript

I did something like this to initially hide the body scrollbar, and then show it when a link is clicked:
$('body').css('overflow', 'hidden');
$('#site').click(function(e) {
$('#wrapper').remove();
$('body').css('overflow', 'scroll');
return false;
});
At first, it does hide the scrollbar and just shows a scrollbar for the overlay (absolutely positioned div (#wrapper)) but when I click on the link (#site) to show the scrollbar again (and remove the overlay), it now shows two scrollbars: one is working, the other is disabled.
HTML:
<div id="wrapper">
--- some content ----
</div>
<div>
--- rest of the website ---
</div>
CSS:
#wrapper {
background-color: #CCC;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
height: 800px;
}
What has gone wrong?

Found a solution to my problem. I just needed to add:
$('html').css('overflow', 'hidden');

You also can use this, in case something from a theme or style is causing the second bar
html {
overflow-x: initial !important;
}

In my case I tried
$('html').css('overflow', 'hidden');
which was removing the two sidebar but I was unable to scroll down to footer.
I used:
$('html').css('overflow-x', 'initial');
Which is working perfectly, shows only one scrollbar vertically and it is scrollable to all content at the bottom

None of the solutions above worked for me. I tried adding overflow-y: hidden; in html and body. Finally, it worked when I added it to what I identified to be a problematic <div>. I found the problem by using Inspect Elements: I highlighted the additional scrollbar by using the "select" tool, and it showed me to which element it belonged - in my case it was a <div> called .main. Reference the screenshot below.

By two scrollbars do you mean a vertical and horizontal scrollbar? If it is, use overflow:auto instead of scroll
http://jsfiddle.net/DmqbU/2/
This will effectively only show scrollbar when needed (if horizontal content is wider than width or vertical content is taller than height)

This solved the problem for me:
body{overflow-y:auto}

Use overflow-x and overflow-y to manage horisontal and vertical scrollbars. Just set overflow-x: none; to stop showing horisontal bar.

add these lines to your style.css code:
html {
height:100%;
width:100%;
margin:0%;
padding:0%;
overflow-x: hidden;
}
body {
overflow-x: hidden;
}

Related

How to Stop Jumping Position fixed element on scrolling

Please anybody help spend 3 days on this but still stuck. I created a section on my site where am playing video-based scroll position to section but when you scroll to the first section or back to the last section from the bottom side video frame jumps.
actually, I don't know how I make position fixed element to top:0 inside relative container currently I have video frame position: absolute which is top:0 and correct but when I scroll am changing position:absolute to position fixed but that can't work with top:0 because fixed element can't work to the relative container so am adding top:35%
please watch the video here
https://www.loom.com/share/c29a3cadb3dc4420a59baaae072c1cec
and here is the site link
https://qa.modulos.ai/product-overview/
Okay I found your solution!
Remove everything that you have, and remove those classes not-sticky-top and sticky not-sticky-bottom
And your main problem is that body has overflow: hidden; which you must remove so that sticky can work, like this link says
Change your css like this:
body {
overflow-x: visible;
}
.sticky {
position: sticky !important;
top: 100px; // This is important so that the video doesn't go under the header, you can fine tune it afterwords
max-width: 100%;
}
.video-side {
position: relative;
}
Don't forget to remove over-flow: hidden on body and remove all those JS triggers and all other classes on the video element

Fixed div disappearing on scroll left Css

I looked at many answers here on SO but none worked for me.
Below are the posts I have looked before posting this question.
jquery fixed div on scroll-down
jquery fixed div on scroll, smooth movement
jquery fixed div on scroll, bottom boundary
How to manage css left property for fixed div
fixed div position on scroll is not working in all conditions
Absolute DIV inside a relative DIV inside a fixed Div disappears on scroll
Sticking a fixed div on scrolling down
For this purpose I have created a fiddle that shows my problem :
jsfiddle demo here
My problem there is the login span disappearing on zooming (I can't see it on scroll right)
#fixedContainer
{
background-color: #ddd;
position: fixed;
width: 500px;
height: 100px;
top: 0px;
margin-left: 20px;
}
.login
{
float: right;
}
I would prefer a CSS solution but am OK with a Javascript solution too.
Add these css attributes to your #fixedContainer selector:
overflow-x: auto;
max-width: 100%;

Hiding multiple scrollbars CSS all browsers

I'm having a very difficult time accomplishing what I want to do, and I'm starting to wonder if it's possible at all. Essentially, I have three divs that each vary in width depending on which one you're hovering over (simple transitions). The height of these divs is always equal to 100% height of the browser window, calculated with jQuery.
I use overflow-y: scroll to accomplish multiple sections of scrollable content. However, it looks clunkly to include three scrollbars, so I'm trying to get rid of them. On chrome, it's easy, I just use ::-webkit-scrollbar { display: none; }, but for other browsers it isn't quite as simple. Other questions have answered saying I need to be wrapping my content in a div that has overflow: hidden but I can't quite get that to work without all these transitions completely failing.
Here's a demo of what I'm talking about. Thanks in advance!
overflow-y: hidden will hide the scrollbars, if you set this to scroll on :hover only you will still be able to scroll each panel when the user hovers over it:
.panel {
overflow-y: hidden;
}
.panel:hover {
overflow-y: scroll;
}
The previous examples were missing the default hidden, that will stop the panels scrolling back to the top.
You can show the scrollbar on hover
#container .display-panel:hover {
overflow-y: scroll;
}
remove the overflow-y from display-panel http://jsfiddle.net/9T7ex/1/

Issue with position:fixed and hash tags (details in body)

I have a position:fixed; navigation bar. Whenever I go to mypage.html#myid, the navigation bar overlaps some of the content of myid. How can I move the entire page down a bit so that the navigation bar isn't covering the content?
P.S. I tried body{padding-top:50px;}
You can't use margin-top on the myid div? Your main content should be inside a div and this div should be inside the body then myid div can push down from the body to allow enough space for the fixed nav bar.
Some code would help...
There is a bit hacky solution needed.
#myID:before {
display: block;
content: " ";
margin-top: -285px; /* navigation height */
height: 285px; /* navigation height */
visibility: hidden;
}
The logic is to add hidden element before the #myID content so browser will give it a hidden space. Giving minus valie as margin-top will prevent it to give phsyical space.
Please have a look at here for detail: http://css-tricks.com/hash-tag-links-padding/

Weird HTML/JS/CSS scrollbar functionality puzzle

So, I have a particularly unique goal I wish to achieve with CSS, HTML and jQuery. Basically, I have a page element that when I mouse over it, I want scrolling to be disabled. I am currently achieving this by setting the body's overflow property to "hidden." However, the disappearing scrollbars means that content is shifting to the right to fill the void created by the disappearing vertical scroll bar. Is there away to make the page behave as overflow:hidden but still display scrollbar placeholders?
You could do it by having a div within a div, such that the outer div is scrollable (auto) and then resize the inner div on mouseover to be exactly the right size.
So by example...
HTML:
<div id="outerTest" >
<div id="innerTest" >
...content goes here...
</div>
</div>
CSS:
#outerTest {
width: 100px;
height: 100px;
overflow: scroll;
}
#innerTest {
overflow: hidden;
}
jQuery:
$("#outerTest").hover(function() {
$("#innerTest").css({width: "100%", height: "100%"});
}, function() {
$("#innerTest").css({width: "auto", height: "auto"});
});
Alternatively, you could also implement a jQuery-based scroll bar. jScrollPane

Categories