最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to set -webkit-overflow-scrolling inline style on react component - Stack Overflow

programmeradmin6浏览0评论

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 in fontSize). – 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
Add a ment  | 

1 Answer 1

Reset to default 12

I've used this successfully:

overflowScrolling: "touch",
WebkitOverflowScrolling: "touch",
发布评论

评论列表(0)

  1. 暂无评论