Floating Horizontal Scrollbar in Angular 2+
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
In Angular 6 I have a wide and long table. The issue is to scroll horizontally the user needs to go to the bottom of the table in order to access the scrolls.
I would like to implement a floating horizontal scrollbar, which floats the horizontal scroll bars when the table is in view. I came across these solutions using Jquery but am struggling to implement this in Angular 6 (or 5,4,3 etc). Does anyone have solution for this or can help me out on how to implement in Angular? Thanks so much in advance.
Demo
JQUERY Plugin
Jquery Solution - StackOverflow
css
angular scrollbar asked Nov 24 '18 at 6:52
Ka TechKa Tech
2,75293149
add a comment |
In Angular 6 I have a wide and long table. The issue is to scroll horizontally the user needs to go to the bottom of the table in order to access the scrolls.
I would like to implement a floating horizontal scrollbar, which floats the horizontal scroll bars when the table is in view. I came across these solutions using Jquery but am struggling to implement this in Angular 6 (or 5,4,3 etc). Does anyone have solution for this or can help me out on how to implement in Angular? Thanks so much in advance.
Demo
JQUERY Plugin
Jquery Solution - StackOverflow
css
angular scrollbar asked Nov 24 '18 at 6:52
Ka TechKa Tech
2,75293149
You could usengx-scrollbar
– SiddAjmera
Nov 24 '18 at 6:56
add a comment |
In Angular 6 I have a wide and long table. The issue is to scroll horizontally the user needs to go to the bottom of the table in order to access the scrolls.
I would like to implement a floating horizontal scrollbar, which floats the horizontal scroll bars when the table is in view. I came across these solutions using Jquery but am struggling to implement this in Angular 6 (or 5,4,3 etc). Does anyone have solution for this or can help me out on how to implement in Angular? Thanks so much in advance.
Demo
JQUERY Plugin
Jquery Solution - StackOverflow
css
angular scrollbar asked Nov 24 '18 at 6:52
Ka TechKa Tech
2,75293149
In Angular 6 I have a wide and long table. The issue is to scroll horizontally the user needs to go to the bottom of the table in order to access the scrolls.
I would like to implement a floating horizontal scrollbar, which floats the horizontal scroll bars when the table is in view. I came across these solutions using Jquery but am struggling to implement this in Angular 6 (or 5,4,3 etc). Does anyone have solution for this or can help me out on how to implement in Angular? Thanks so much in advance.
Demo
JQUERY Plugin
Jquery Solution - StackOverflow
css
angular scrollbar css
angular scrollbar asked Nov 24 '18 at 6:52
Ka TechKa Tech
2,75293149
asked Nov 24 '18 at 6:52
Ka TechKa Tech
2,75293149
asked Nov 24 '18 at 6:52
Ka TechKa Tech
2,75293149
asked Nov 24 '18 at 6:52
Ka TechKa Tech
2,75293149
asked Nov 24 '18 at 6:52
Ka TechKa Tech
2,75293149
2,75293149
You could usengx-scrollbar
– SiddAjmera
Nov 24 '18 at 6:56
add a comment |
You could usengx-scrollbar
– SiddAjmera
Nov 24 '18 at 6:56
You could use
ngx-scrollbar– SiddAjmera
Nov 24 '18 at 6:56
You could use
ngx-scrollbar– SiddAjmera
Nov 24 '18 at 6:56
add a comment |
1 Answer
1
active
oldest
votes
solution 1: if you looking for how to use jQuery with Angular you can achieve by first add jQuery and floatingScroll plugin to angular.json file in "scripts": [...]
to use jQuery
TS
....
declare let $: any; // you can use "jQuery" keyword instead of "$"
@component({
selector: '...',
templateUrl: ['...'],
styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {
constructor(private eleRef: ElementRef) {}
ngOnInit() {
$(this.eleRef.nativeElement).find('yourTableSelector').floatingScroll();
}
}
when you use $(this.eleRef.nativeElement) that gonna get the tree root of the component dom then .find('yourTableSelector') to get the element you want.
solution 2: there's alternative library to achieve floating scrollbar or custom scrollbar in general one of this is ngx-perfect-scrollbar i use it and it gives you good features to handle your scroll and track his behavior take a look on it ... you can choose to allow vertical or horizontal scrollbar with some css like position: fixed and javascript functionality to show or hide the scrollbar if table in view or not you can achieve what you want.
answered Nov 24 '18 at 7:30
Amir FawzyAmir Fawzy
25139
i had the same problem, i used nx-perfect-scrollbar, but i dnt know how to make it sticky/keep-floating, can you help please
– Adeel Ahmed
Jan 23 at 11:58
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455887%2ffloating-horizontal-scrollbar-in-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
solution 1: if you looking for how to use jQuery with Angular you can achieve by first add jQuery and floatingScroll plugin to angular.json file in "scripts": [...]
to use jQuery
TS
....
declare let $: any; // you can use "jQuery" keyword instead of "$"
@component({
selector: '...',
templateUrl: ['...'],
styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {
constructor(private eleRef: ElementRef) {}
ngOnInit() {
$(this.eleRef.nativeElement).find('yourTableSelector').floatingScroll();
}
}
when you use $(this.eleRef.nativeElement) that gonna get the tree root of the component dom then .find('yourTableSelector') to get the element you want.
solution 2: there's alternative library to achieve floating scrollbar or custom scrollbar in general one of this is ngx-perfect-scrollbar i use it and it gives you good features to handle your scroll and track his behavior take a look on it ... you can choose to allow vertical or horizontal scrollbar with some css like position: fixed and javascript functionality to show or hide the scrollbar if table in view or not you can achieve what you want.
answered Nov 24 '18 at 7:30
Amir FawzyAmir Fawzy
25139
i had the same problem, i used nx-perfect-scrollbar, but i dnt know how to make it sticky/keep-floating, can you help please
– Adeel Ahmed
Jan 23 at 11:58
add a comment |
solution 1: if you looking for how to use jQuery with Angular you can achieve by first add jQuery and floatingScroll plugin to angular.json file in "scripts": [...]
to use jQuery
TS
....
declare let $: any; // you can use "jQuery" keyword instead of "$"
@component({
selector: '...',
templateUrl: ['...'],
styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {
constructor(private eleRef: ElementRef) {}
ngOnInit() {
$(this.eleRef.nativeElement).find('yourTableSelector').floatingScroll();
}
}
when you use $(this.eleRef.nativeElement) that gonna get the tree root of the component dom then .find('yourTableSelector') to get the element you want.
solution 2: there's alternative library to achieve floating scrollbar or custom scrollbar in general one of this is ngx-perfect-scrollbar i use it and it gives you good features to handle your scroll and track his behavior take a look on it ... you can choose to allow vertical or horizontal scrollbar with some css like position: fixed and javascript functionality to show or hide the scrollbar if table in view or not you can achieve what you want.
answered Nov 24 '18 at 7:30
Amir FawzyAmir Fawzy
25139
i had the same problem, i used nx-perfect-scrollbar, but i dnt know how to make it sticky/keep-floating, can you help please
– Adeel Ahmed
Jan 23 at 11:58
add a comment |
solution 1: if you looking for how to use jQuery with Angular you can achieve by first add jQuery and floatingScroll plugin to angular.json file in "scripts": [...]
to use jQuery
TS
....
declare let $: any; // you can use "jQuery" keyword instead of "$"
@component({
selector: '...',
templateUrl: ['...'],
styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {
constructor(private eleRef: ElementRef) {}
ngOnInit() {
$(this.eleRef.nativeElement).find('yourTableSelector').floatingScroll();
}
}
when you use $(this.eleRef.nativeElement) that gonna get the tree root of the component dom then .find('yourTableSelector') to get the element you want.
solution 2: there's alternative library to achieve floating scrollbar or custom scrollbar in general one of this is ngx-perfect-scrollbar i use it and it gives you good features to handle your scroll and track his behavior take a look on it ... you can choose to allow vertical or horizontal scrollbar with some css like position: fixed and javascript functionality to show or hide the scrollbar if table in view or not you can achieve what you want.
answered Nov 24 '18 at 7:30
Amir FawzyAmir Fawzy
25139
solution 1: if you looking for how to use jQuery with Angular you can achieve by first add jQuery and floatingScroll plugin to angular.json file in "scripts": [...]
to use jQuery
TS
....
declare let $: any; // you can use "jQuery" keyword instead of "$"
@component({
selector: '...',
templateUrl: ['...'],
styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {
constructor(private eleRef: ElementRef) {}
ngOnInit() {
$(this.eleRef.nativeElement).find('yourTableSelector').floatingScroll();
}
}
when you use $(this.eleRef.nativeElement) that gonna get the tree root of the component dom then .find('yourTableSelector') to get the element you want.
solution 2: there's alternative library to achieve floating scrollbar or custom scrollbar in general one of this is ngx-perfect-scrollbar i use it and it gives you good features to handle your scroll and track his behavior take a look on it ... you can choose to allow vertical or horizontal scrollbar with some css like position: fixed and javascript functionality to show or hide the scrollbar if table in view or not you can achieve what you want.
answered Nov 24 '18 at 7:30
Amir FawzyAmir Fawzy
25139
answered Nov 24 '18 at 7:30
Amir FawzyAmir Fawzy
25139
answered Nov 24 '18 at 7:30
Amir FawzyAmir Fawzy
25139
answered Nov 24 '18 at 7:30
Amir FawzyAmir Fawzy
25139
25139
i had the same problem, i used nx-perfect-scrollbar, but i dnt know how to make it sticky/keep-floating, can you help please
– Adeel Ahmed
Jan 23 at 11:58
add a comment |
i had the same problem, i used nx-perfect-scrollbar, but i dnt know how to make it sticky/keep-floating, can you help please
– Adeel Ahmed
Jan 23 at 11:58
i had the same problem, i used nx-perfect-scrollbar, but i dnt know how to make it sticky/keep-floating, can you help please
– Adeel Ahmed
Jan 23 at 11:58
i had the same problem, i used nx-perfect-scrollbar, but i dnt know how to make it sticky/keep-floating, can you help please
– Adeel Ahmed
Jan 23 at 11:58
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455887%2ffloating-horizontal-scrollbar-in-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You could use
ngx-scrollbar– SiddAjmera
Nov 24 '18 at 6:56