Removing IE's scrollbar - javascript

First of all, I don't want to just remove it, I want to ensure that there is still scrolling capabilities there also.
This is because I would like to have a 'slide show' affect on the website, where you can click 'next' and before, however with the scroll bar there, you can just go through it.
I have hidden the scrollbar in other browsers using:
::-webkit-scrollbar {
display: none;
}
for webkit browsers and overflow: -moz-scrollbars-none; for Firefox. However, when it comes to IE, I can't find anything to simply hide it.
I found these on the internet:
scrollbar-3dlight-color:;
scrollbar-arrow-color:;
scrollbar-base-color:;
scrollbar-darkshadow-color:;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:;
I thought by changing the colour to transparent, it would disappear, but it did not (just reverts back to normal).
Is there a way I can simply hide the scrollbar (simply like display:none or something else), in IE? I am open to css and js options.
jsFiddle of problem
NOTE: Adding overflow:hidden; stops the page from going past the second div when clicking the a tag.

See here for fiddle using your current code
Try this trick
body, div, html{
height:100%;
width:100%;
padding:0;
margin:0;
}
body{
overflow:hidden;
position:fixed;
}
div{
overflow-y:scroll;
position:relative;
right:-20px;
}
It offsets a scrollable div so its vertical scrollbar is outside the viewable area.

I have similar problem, I don't need scroll bars on main page, but i have to have inside of my page content like in div's and span's.
So I found solution like this:
body {
-ms-overflow-style: none;
}
div, span {
-ms-overflow-style: auto;
}

Related

Weird body padding on mobile layout

If you go to https://www.biznessapps.com on mobile layout, inspect element in Google Chrome and disable overflow-x: hidden from body and resize again, then you will find the white vertical stripe (padding) in the right side.
I had to add overflow-x:hidden to body to hide this, but not sure what causes this. Is there any other way than using overflow-x:hidden ?
So what you are doing with the overflow-x solution is a viable solution, but if you'd like to learn how to debug ghost elements, read below:
Basically, I debugged your site and saw that some of your sections (mainly ones in columns of 2 or 3, that float) extend past the wrapper's width. You can see this as well by inputting this into your CSS
*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
Scroll down and look for sections that extend past the main div, such as this:
Most of these are the results of a little extra margin or padding on the floated section.
Like I said, the width:100%; and overflow-x:hidden; is still a very common solution, this is just how to debug it if you'd like to fix the structure.
Hope this helps!
It's a scroll bar. Since the default behaviour for overflow is to add the scroll bar,
overflow-x: visible;
might be the correct way to go.
Scrollbar some times visible and shows like extra padding or margin in body hiding overflow-x will work.
html, body {
width: 100vw;
overflow-x: hidden;
}

Top-left pixel outside 100% width of the browser window

Is it possible to load my webpage so that top-left pixel isn't the first one but rather somewhere else?
This is my current webpage layout and I'd like my webpage to be loaded so that top-left pixel is right where red arrow lands
I think I understand your request: it sounds like your goal is to have a single-column page and then exclusively in the about section with the right/left blocks you'd like to be able to scroll left/right.
If that's correct, I would restructure your page to have just the middle column, and then use css positioning on your #about section like this:
#about {position: relative;}
#left {position:absolute; left:-100%; width:100%; min-height:100%;}
#right {position:absolute; left:100%; width:100%; min-height:100%;}
You might need to do something with your body overflow, too:
body {overflow-x:hidden;}
Then to actually create the functionality you want, you could use javascript/jQuery to animate the sections left/right when you click on the anchors in the #about section.
Or you could use this js plugin, which works extremely well and is designed for just this type of layout: http://alvarotrigo.com/fullPage/
For whole container or body tag apply this css
position: absolute;
top:0;
left:0;

Scroll to bottom not working

Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});
There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}
You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}

Limited scrolling for an Image

I'm developing a mobile website, and a full-screen image will appear as a floating-layer once the website is loaded.
Please see below........
A: My mobile website contains a lot of content which exceeds the windows height
B: After page loaded, a full-screen image appears as a floating-layer on top of the contents. The image exceeds the windows height
C: When user scroll down, he can see the lower part of the image, but not the website content. The bottom of the image should never detached from the screen bottom no matter how the user tries to scroll down
May I know how can I achieve C ??
Also, in situation B, sometimes the image may not exceed the screen height if the user is using a Smartphone with big screen, in this case, the image should be fixed at the top of the screen and not scrollable.
It would be better if all the above can be achieved by NOT using jquery. However, if it is a must, then it is still ok........
Many thanks.
While the general effect is doable with CSS only, you will probably need javascript to toggle the effect on and off.
The general idea is to use position: fixed and overflow: scroll on a layer containing the image, while the body has overflow: hidden. Under these conditions, you're able to scroll the contents of the overlay but not the body.
While this works on desktop, things are a little bit different on mobile where all of the content will be rendered despite the overflow: hidden on the body. A quick work-around is to apply position: fixed to the body as well. I don't know if this is intended behaviour, but it works fine in both Safari and Chrome on iOS.
Markup outlines:
<body class="no-scroll">
<section class="content">
/* content here */
</section>
<aside class="overlay">
<img src="img.jpg">
</aside>
</body>
CSS:
.no-scroll {
overflow: hidden;
position: fixed;
}
.overlay {
overflow-y: scroll;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
}
.overlay img {
width: 100%;
height: auto;
}
.no-scroll .overlay {
display: block;
}
With this you could use javascript to toggle the class no-scroll on the body. When it's there, the overflowing content is hidden and the overlay is visible. When it's not there, the overlay is hidden.
Here's an example of the effect (without the .no-scroll class and javascript, though, just to show that it works):
Full screen
With markup/CSS visible
Edit:
In the example above, I gave the overlay a semi-transparent background and gave the image inside of it a max-width of 100%. If you want the entire screen to be filled with the image, change the max-width to a regular width.
Edit 2:
As requested, here's a jQuery function to toggle the effect.
$(".close").click(function() {
$("body").toggleClass("no-scroll");
});
Just give a <button> or whatever the class name close and it'll toggle the effect on and off.

Disable the body scroll, but keep it on individual div elements which are greater in height than the browser

I have searched everywhere and have yet to get a solution. Okay heres the deal, I have a one page website which has several div elements underneath each other, sort of acting like individual pages I guess. What I want to achieve is to disable the scrolling of the actual web page all together, yet keeping the scroll of the active div in play if it goes below the web browser. To get to each other section of the page is simple done by using anchor links on the header.
I'm not exactly sure what you're looking for, but I think you want a div to be scrollable, but not the actual document. You can do this by absolutely positioning the div on the screen with a fixed height and set the overflow to auto. I've done this using the following CSS code:
#scrollable {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
overflow: auto;
}​
See an example: http://jsfiddle.net/rustyjeans/rgzBE/
Have you tried with
overflow-x:hidden;
turns out its quite simple.
CSS
body{
overflow:hidden;
}
#div_you_need_scrolling{
overflow:auto;
}

Categories

Resources