100% DIV width is not really 100%
The 100% value is 100% of the parent’s width or the view port. See the documentation.
The 100% value is 100% of the parent’s width or the view port. See the documentation.
You have taken on a task that, if you succeed, will make you a hero. I tried this and the straightforward thing — to position:fixed; the <thead> — is impossible. I had to copy all of the <thead> into a new object. But when you do that, the horizontal spacing of the <th> elements all … Read more
I’m afraid the best way to solve this is to force the scroll bar to be visible at all times with html {overflow-y: scroll;}. The problem you have is that the “available area” shrinks with say 10 px when the scroll bar appear. This cause the calculated margin on your left side to shrink with … Read more
This seems to work. var lastScrollLeft = 0; $(window).scroll(function() { var documentScrollLeft = $(document).scrollLeft(); if (lastScrollLeft != documentScrollLeft) { console.log(‘scroll x’); lastScrollLeft = documentScrollLeft; } }); jsFiddle.
In HTML5 there is no scrolling attribute because “its function is better handled by CSS” see http://www.w3.org/TR/html5-diff/ for other changes. Well and the CSS solution: CSS solution: HTML4’s scrolling=”no” is kind of an alias of the CSS’s overflow: hidden, to do so it is important to set size attributes width/height: iframe.noScrolling{ width: 250px; /*or any … Read more
You could check whether the user has scrolled to the bottom or not in the below way… Html file <div (scroll)=”onScroll($event)”> … … </div> typescript file onScroll(event: any) { // visible height + pixel scrolled >= total height if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) { console.log(“End”); } }
In most modern browsers (Chrome and Firefox, but not Safari, UC, or IE) you can pass options in an object to .scrollIntoView(). Try this: elm.scrollIntoView({ behavior: ‘smooth’, block: ‘center’ }) Other values are behavior: ‘instant’ or block: ‘start’ or block: ‘end’. See https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView
I think the easiest way is each interested component listening to the scroll event. @Component({ … // alternative to `@HostListener(…)` // host: {‘(window:scroll)’: ‘doSomething($event)’} }) class SomeComponent { @HostListener(‘window:scroll’, [‘$event’]) doSomething(event) { // console.debug(“Scroll Event”, document.body.scrollTop); // see András Szepesházi’s comment below console.debug(“Scroll Event”, window.pageYOffset ); } } plunker Plunker using @HostListener() Hint: bootstrap(MyComponent, [ … Read more
That sounds strange, but I have seen it in other browsers. You can work around this like so. var width = $(window).width(), height = $(window).height(); then in your resize event handler you can do. if($(window).width() != width || $(window).height() != height){ //Do something } I don’t know the scope of your functions and all that, … Read more
Maybe You should try scrollIntoView. document.getElementById(‘id’).scrollIntoView(); This will scroll to your Element.