Scrolling by touch screen not working

[JfantasyBooks]

Hi there.

Site: https://fantasy-books.live
Wordpress Version: 4.9.4
X Pro: 1.2.7

Problem:

So, currently, when someone goes to a story on the site (ex. of story ) And they click on the “Details” button or the pic and the modal pops up, it shows you text. A synopsis.

On mobile, you have to use the scrollbar to view it all. (It will only appear on mobile or when the window is small.

Now, my problem is it won’t scroll for touchscreen. You can use a mouse. But when you try use touchscreen, it won’t. Can you help?

[rad]

Hi there,

Thanks for writing in.

What device you’re testing it with? I checked and I’m able to scroll, it uses a custom scroll bar from ConvertPlus.

Thanks!

[JfantasyBooks]

Hi. I am using my touchscreen laptop. And my samsung android Galaxy.

Many of my users have reported the bug.

It will scroll with a mouse, just now tih touch screen. I’ve noticed though, touchscreen works for like a second, and then, it doesn’t.

When the screen size is very mall, a second scrollbar appears. It is then that it stops working. Can you try using the window, on a desktop and making the window with small? You’ll see what I mean. It happens similarly on phones as it would on that small window.

A second scrollbar appears and the one that surrounds the synopses freeze from touch screen.

[christopher]

Hi there,

Thank you for the information. I checked the website with the criteria you mentioned and saw the scrollbar. That is caused by the code you added in the Raw Content element which has a div tag with the class of item and the inline style below:

max-height:200px;width:autox;border:none;overflow:auto;

That is the problem cause. The code you added does not work well with the modal view and you need to change that.

Thank you.

[JfantasyBooks]

Hi there. So, I removed the entire “max-height:200px:width…etc”

and I still have a problem.

I’ve noticed that .ps-scrollbar-y shows up when the screen is small enough. Furthermore, so does the scrollbar for the site.

But I want a scrollbar over the novel description.

But even without the scrollbar over the novel Descriptions, there are still two, and only the scrollbar with the .ps-scrollbar-y class works. I wish to remove that scrollbar, but I don’t know how to. It seems to come with the Convert Plus? Maybe it’s deactivated the X-theme’s scrollbar?

[christopher]

Hi there,

If you want to remove the scrollbar you can simply add the CSS code below to X > Launch > Options > CSS:

.ps-container.ps-active-x>.ps-scrollbar-x-rail, .ps-container.ps-active-y>.ps-scrollbar-y-rail {
    display: none;
}

Thank you.

[JfantasyBooks]

Thanks for that.

But I still can’t figure out why scrolling by touch won’t work.

Try this link. https://fantasy-books.live/index/great-hans-female-general-wei-qiqi/

Click on the details button and then read more. The scrollbar shows, but it won’t allow scrolling by touch for touch screen devices.

[rad]

Hi there,

It’s weird and before I continue further testing, would you mind disabling your site’s/host’s Pagespeed optimization? It could be affecting some javascript functionality of the ConvertPlus. The scrolling doesn’t take effect on the modal but works outside it.

Thanks!

[JfantasyBooks]

Hi,

I don’t have any pagespeed optimizations.

[JfantasyBooks]

Hi. So, I removed Convert Plus and am using X theme’s modal.

I still have the same issues. The scroll touch screen works fine on larger screens. But as soon as the screen is small, it won’t move.

[JfantasyBooks]

Update: So, it works fine on mobile devices now.

Problem still occurs when you change the window size on larger devices and make it small. The scrollbars no longer work.

[christian]

Hey @JfantasyBooks,

The issue comes down to the modal height vs the screen’s height. If the modal’s height including its padding is greater than the screen’s height. The issue will happen. Regretfully, there is no solution to this because that is the natural behavior of the interface. What you can do is, hide elements of your modal in small screens so that the modal’s height would be shorter.

Thanks.