CODEWITHSUNDEEP
javascripthtmlcss
Ayoub Bani
Ayoub Bani

Reputation: 319

Disable horizontal scrolling on input type text

I have input text that is readonly and it might contain long text. I'm trying with css to disable user to scroll horizontally with mouse but nothing seems to work. Any help is appreciated.

Upvotes: 1

Views: 3726

Answers (3)

Mallikarjun GK
Mallikarjun GK

Reputation: 1

solved in react application. this is what I have tried for disabling horizontal scroll on input element. instead of 'wheel' event I have relied on 'scroll' event. in following situation, when input element have larger string and it is in non editing state, user tries to scroll using laptop touch pad input element scrolls because of dynamic width of my column. using 'scrollLeft' property we can avoid scroll behavior. but this affects editing of input text. using actual width of content we can reset reset the scrollLeft property

 const StringCell= ({
    value = '',
    inputRef,
}) => {
    const [text, setText] = useState(value);
    const update = useCallback(
        event => {
            setText(event.target.value);
        },
        [setText]
    );


    const onScrollHandler = useCallback((event) => {
        if(document.activeElement === event.target){
            event.preventDefault();
            if(!event.target.scrollLeft){
                const targetRect = event.target.getBoundingClientRect();
                if(targetRect?.width){
                    event.target.scrollLeft = Math.ceil(targetRect?.width);
                }
            }
        } else {
            event.target.scrollLeft = 0;
        }
        return false;
    },[])

    useEffect(() => {
        setText(value);
        const currElem = inputRef?.current;
        currElem?.addEventListener('scroll', onScrollHandler, {passive:false});
        return () => {
            currElem?.removeEventListener('scroll', onScrollHandler)
        }
    }, [value]);

    

    return (
        <input
            type="text"
            ref={inputRef}
            title={title}
            value={text}
            onChange={update}
        />
    );
};

Upvotes: 0

Ayoub Bani
Ayoub Bani

Reputation: 319

I found another solution which is great using div that is editable and disabling the horizontal scroll on it. This is the code for it:

<div contenteditable="true">
I'm Editable. And you can't scroll me!I'm Editable. And you can't scroll me!I'm Editable. And you can't scroll me!I'm Editable. And you can't scroll me!I'm Editable. And you can't scroll me!
</div>

CSS

div{
  overflow-x: hidden;
  white-space: nowrap;
}

Upvotes: 0

Victor adt
Victor adt

Reputation: 69

I think the <textarea> tag is more accurate for long text.

maybe something like this can help you:

textarea{
  width: 50px;
  height: 50px;
  overflow: hidden;
  resize: none
}
<form>
  <textarea>
    Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
  </textarea>
</form>

Edit: On input read only you can use the pointer-events: none see:

input{
    pointer-events: none;
}

https://codepen.io/zecka/pen/KKKxrBv

Upvotes: 4

Related Questions