import React from 'react';
import styled from 'styled-components';
import CustomScrollbars from '../../../CustomScrollbars';
const Text = ({ text }) => {
if (!text) return null;
function createMarkup(string) {
return {__html: `${string}`};
};
return (
<StyledText>
<CustomScrollbars custom={{br: 0, wrapWidth: 4}}>
<Content dangerouslySetInnerHTML={createMarkup(text)} />
</CustomScrollbars>
</StyledText>
);
};
const StyledText = styled.div`
height: 175px;
margin-top: 10px;
padding: 8px 0;
border: 0;
border-top: 1px solid #515151;
border-bottom: 1px solid #515151;
color: #515151;
`;
const Content = styled.div`
&:ul {
font-size: 16px;
list-style-type: square;
};
&:h2 {
margin: 7px 0 5px;
font-size: 20px;
};
&:p {
margin: 0 0 5px;
font-size: 16px;
};
`;
export default Text;
какой смысл выкладывать в песочницу нерабочий код?
а это значит, что у вас не аналогично и состояние изменяется каждое событие. По-хорошему, так быть не должно.
Использовать фиксированное позиционирование. В данном случае, по сути и не нужно слушать скролл.
По вашей задаче, если, допустим, у вас есть Header, который имеет два состояния, то по событию скролл его обновление должно происходить только в тот, момент когда это нужно, а не каждый вызов. То есть при скролле вниз это будет всего одно обновление.