I am using inline style for react ponent. They can be defined as below.
const style= {
position: 'absolute',
left: 0,
right: 0,
bottom: '7.5%',
top: '5.2rem',
overflowY: 'auto',
},
It has some gramma different with css, like 'overflow-y' in css should be set as overflowY in inline style. Now I wander how to set this style -webkit-overflow-scrolling as inline style in react? I have tried below settings but none of them work.
WebkitOverflowScrolling: 'touch',
'-webkit-overflow-scrolling': 'touch',
I am using inline style for react ponent. They can be defined as below.
const style= {
position: 'absolute',
left: 0,
right: 0,
bottom: '7.5%',
top: '5.2rem',
overflowY: 'auto',
},
It has some gramma different with css, like 'overflow-y' in css should be set as overflowY in inline style. Now I wander how to set this style -webkit-overflow-scrolling as inline style in react? I have tried below settings but none of them work.
WebkitOverflowScrolling: 'touch',
'-webkit-overflow-scrolling': 'touch',
Share
Improve this question
asked Aug 20, 2016 at 10:40
Joey Yi ZhaoJoey Yi Zhao
42.6k87 gold badges350 silver badges657 bronze badges
5
-
What about
webkitOverflowScrolling
? (note lower case w) – ivarni Commented Aug 20, 2016 at 11:02 -
"Multi word" properties (e.g.
font-size
etc.) are written in camelCase (as infontSize
). – Marko Gresak Commented Aug 20, 2016 at 12:30 - As a remendation if you're going to do a lot of styling with react, I would say to regular stylesheet files instead of setting style in react. The styling in JS just isn't there yet, you'll have a hard time debugging reused styles, you can't easily copy-paste css syntax, media queries are handled in JS instead of browser's css engine and so on. I had to use this on a project I joined and it was a bad developer experience overall. – Marko Gresak Commented Aug 20, 2016 at 12:31
- I have tried to separate css from react ponent but it turn out that it is really hard to find a dom style. If we put styles in each ponent, it would be really easy to navigate between dom and style. It is true that reuse styles are hard in this case. – Joey Yi Zhao Commented Aug 20, 2016 at 12:38
- Possible duplicate of Any way to apply 'webkit-overflow-scrolling: touch' inline with javascipt? – jennz0r Commented Feb 2, 2017 at 0:46
1 Answer
Reset to default 12I've used this successfully:
overflowScrolling: "touch",
WebkitOverflowScrolling: "touch",