I'm pretty new to angular and webdev as a whole and I'm kind of stuck right now. I'm currently trying to do some custom logic with scrolling as I need to move some absolutely positioned elements relative to an overflow's scrollbar.
I have a div:
<div id="tableWrapper" class="search-table-outter" (scroll)="onScroll($event)">
...
</div>
Formatted with CSS that creates the overflow:
.search-table-outter { overflow-x: auto; margin-bottom: 50px; }
and in typescript:
onScroll(event) { console.log("SCROLLING"); }
When I load up my page and attempt to scroll in that overflow, the event is successfully captured and "SCROLLING" appears in console as expected, however, the overflow no longer scrolls. I'm assuming this is expected behavior however I want the overflow to still scroll while modifying the properties of the other elements. Is there something basic that I'm missing?
How can I capture the event and do what I want while still having the overflow scroll?
Thanks!
Related
This is a very weird and specific bug that only happens on Firefox, and I'm having trouble narrowing it down.
I have a page with a sticky menu followed by a fluid container.
In order to remove all padding from the container while keeping everything else untouched (like column gutters), I had to add this CSS to it:
#main-container {
padding: 0;
overflow-x: hidden;
}
This is the only simple way I found to do that, and it works.
If you remove the overflow property, some horizontal scrolling appears.
See https://stackoverflow.com/a/35192643/5845942
But when I pin the menu, scroll until its position becomes fixed, and interact with certain items on the page, vertical space appears on the page, between the menu and the container.
This happens when triggering CSS transitions and other JS DOM manipulations.
Here is a jsfiddle: https://jsfiddle.net/vctls/mac2Ls0d/35/
A screenshot:
And a video:
https://imgur.com/a/28KhPEY
Again, this only happens on Firefox. Chrome handles the layout without any issue.
It doesn't happen either if the menu isn't pinned, or if you remove the overflow property from the container.
This seems to be a Firefox bug. I found a similar issue was already reported:
https://bugzilla.mozilla.org/show_bug.cgi?id=1618029
I'm trying to find a workaround.
I'm building a website that has custom scrolling, and as such, I would like to hide default scroll bars. I'm using the following CSS to accomplish this:
html, body {
overflow: hidden;
}
This seems to work, but the problem I'm having is that scrollbars flash and then disappear whenever the page loads. This appears to happen in all browsers on Windows. Any idea as to why this might be?
Angular is also being used in the project.
I found the answer to the problem:
I had a transition wrapper that Angular was injecting. This transition wrapper had a default overflow value, and thus would show scrollbars. Scrollbars flashed because the transition only played for .5s, and then would leave the DOM. Adding the following line to my code made it work:
[ui-view].wrapper {
&.ng-enter,
&.ng-leave {
overflow: hidden;
}
}
I have a menu that's within a div that I hide off screen. When the menu-button is pressed I bring the menu in to view. Whilst doing this, I shift the visible content of the body over to one side, allowing room for the menu.
When I originally did this, I placed overflow-x:hidden; in the body and it worked perfectly for desktops. When I loaded the website on to my phone, I noticed that the phone didn't behave the same - it attempt to display the menu and all of the content that was on the screen.
I did a little reading and it stated that mobile browsers ignore overflow-x when placed in the html or body tags and a wrapper div should be created.
When i made this edit my menu vanished. When I click the menu-button, the content moves across for the menu but it doesn't appear.
What is going on here? I don't quite understand why the menu would disappear. How can I fix this?
The wrapper that I made is....
#body_wrapper{
overflow-x: hidden;
}
<div id="body_wrapper">
My nav bar...
My menu...
my content...
</div>
My website is - http://robingham.co.uk/LUUCC6/index.php
This current edit of the website has the overflow-x:hidden; set in the body of the CSS, not the body_wrapper. So the menu displays but it doesn't properly function on a mobile.
So i fixed my issue! Whoop!
Originally i was using .animate() in Jquery for my menu animation. The menu would hide offscreen and using the animate function i would 'slowly'(285px in 0.3s) move the menu in to place on screen. Whilst this worked perfectly fine for desktop browsers where i placed overflow-x: hidden; in to the CSS for the body. Mobile browsers ignore overflow-x: hidden; when placed in the body.
Reading around i saw many times about placing overflow-x: hidden; in to a wrapper for the body content. Ie. content . Whilst it indeed stop a scroll bar popping up for the x-axis and content being shrunk, it screwed up my menu - my menu just vanished. For whatever reason putting overflow-z: hidden; in to the wrapper didn't agree with the Jquery animate function. I tried placing the menu outside of the wrapper but still no luck. I also tried playing overflow-x: hidden; in to both the wrapper and the body with no success.
Okay so time for a new strategy, as i spent far too long playing with my menu to just scrap it.
My solution
I currently have my menu sat outside of the wrapper and so i've decided to keep overflow-x: hidden; in both the body and the wrapper. Maybe an overkill but at least i know it'll function as intended regardless of the browser. Maybe in the future, i'll have a little faff with putting the menu back within the wrapper and only have the overflow-x: hidden; in the wrapper and see if it still works. (I kind of don't like having many things that do the same/similar job scattered everywhere. It feels a little messy.)
The menu has three associated classes attached to it now. menu, menu_hide, and menu_show. menu has all of my CSS formatting. I use the menu_hideand menu_show classes to hide and show the menu.
My default HTML for the menu looks like this. Note that it has two classes.
<div class="menu menu_hide">
My CSS for the hide and show look like this. Note that transition does the same job as the Jquery .animate() function.
.menu_show{
transition: 0.3s;
left: 0px;
}
.menu_hide{
transition: 0.3s;
left: -285px;
}
My JS looks like this. Note that i toggle between the menu showing and hiding classes everytime i hit the menu button.
$('.icon-menu').click(function() {
$('.menu').toggleClass( "menu_show menu_hide" );
});
I am trying to create a chat page on my website. One of the important features of this application is that old messages should be pushed up on the chat output area whenever a new message is received.
The user should be able to scroll up to see messages in the chronological order that they were received. I have tried to do this (http://jsfiddle.net/wasingej/rqee378d/). However, I cannot scroll up to see the overflowing content.
This works fine when content is overflowing below my element (http://jsfiddle.net/wasingej/rqee378d/3/).
All that has changed between the two is the bottom property has been changed to top. Why won't my scroll bar appear in the first example?
Isn't this much simpler?
http://jsfiddle.net/rqee378d/4/
div.outer
{
position: relative;
min-height: 20px;
overflow-y: scroll;
}
div
{
position: relative;
}
And adding the text using a prepend.
http://api.jquery.com/prepend/
Your scroll bar wont appear in your first example because you are positioning the element using absolute. Please read more about positioning here. Here is a quote:
What is happening is the absolutely positioned elements are
positioning themselves in relation to the body element instead of
their direct parent.
This is why your scrollbar is not appearing. If you make them block elements with a position of static then scrolling would work fine.
I have a div that has a lot of content and hence scrolls.. How can I hide the scrollbar such that it is not visible. EDIT: I do want scrolling to work! So.. Scrolling with no scrollbar?
eg
.scrolling_div {
overflow:auto;
/*something else to hide the scrollbar?*/
}
Ok, I spent sometime to write minimal code.
Check DEMO. Mouse over the div and scroll to see the scroller.
Note that this using an external plugin to listen to mousewheel event.
DEMO page for the plugin
overflow:hidden should hide the scrollbar.
.scrolling_div {
overflow: hidden;
}
overflow can take any one of the below values,
visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.Printers may print overflowing content.
auto
Provide scrollbars if content overflows.
Reference
overflow: auto; means "show a scrollbar if necessary". Change it to overflow: hidden; to disable scrolling.
EDIT: Okay, you want to make a custom scrollbar. Then see this sample jsFiddle for how to get started - it includes mouse wheeling and dragging of the scrollbar.
You can try this:
html {
overflow: hidden;
}
it will remove the scrollbar from all the window.
Otherwise if you need it only on a specific div:
.scrolling_div {
overflow: hidden;
}
Use a wrapper which covers the element you want to be scrollable without a scrollbar, and let the wrapper be narrower than the element to scroll, in the horizontal basis. This is what I mean: http://jsfiddle.net/FlagelloDiDio/EdgTt/
It really depends on what you are going for. see here
overflow:hidden; may be what you want.
If you want to dip into css3, you can play with overflow-x and overflow-y for even more options.
The only way to hide the scrollbar is to make the content non-scrollable and just cut off if it exceeds the height (overflow: hidden). Honestly, why would you want to have a page that is scrollable that doesn't have a scrollbar? That would confuse the heck out of any visitors. There's no way you can do this with CSS.
As far as customizing the scrollbar, there are JavaScripts out there to do that. But make sure that if the user has it disabled, they can still properly scroll the page without it.