In these image,the image which is in green color is not fully displayed.Because I am using third party API for these design. That third party API does not contain scroll bar in it. So, I create scroll bar using css3. After creating custom scroll bar third party API is not supported properly on full page. So these is my problem.
Is there any way I can solve this problem using CSS.
ohk i got your question that you added scrollbar on css but it not work on green images. (y) now you have to check that which div or tag you target scrollbar. you have to check which content or div that you want to scroll automatically so you have to find class name or div tag apply scrollbar on it. you applied scrollbar at wrong place so check code again :) or give me code of it so i will correct it
Related
I am using Gatsby for the first time and I have started with the Cara starter template.
I have added a link to the hero that would scroll to the next sections (projects) when clicked.
The link does take you to the next section, however the scroll bar remains scrolled all the way to the top of the bar. Meaning that you cannot scroll back up the page. (Strangely now when you scroll to the bottom of the page, the footer is not aligned with the bottom of the page, but you can now scroll all the way back to the top of the page again.)
I tried using various techniques; a standard anchor tag referencing an id, using gatsby-plugin-smoothscroll to scrollTo() the element, and all have this same end result.
I'm not sure what is causing this behaviour, but maybe it is something to do with the layout or some conflicting scrolling or offsetting. I would appreciate any help to get me back on track.
I have hosted what I have done so far, so that you can see the issue I am having:
https://portfoliositemain36740.gatsbyjs.io/
As the picture above demonstrates, I want a layout that could contain A,B,C 3 sections. But only section B would be visible, A & C should be hidden, but when user swipe on section B, they could see the content of section A or C. I know ScrollView could do this, but I don't want it to be scrollable to the user. I want to programmatically control the behaviour when user swipes on it. Similar to the carousel. I have tried normal layout like GridLayout, FlexboxLayout...they all will contain the elements in the page, they just didnt let them overflow. So anyone has any idea on how to work around on it, please let me know, thanks.
I would recommend using nativescript-carousel (https://market.nativescript.org/plugins/nativescript-carousel) to achieve this. I think that is pretty much what you are after - just hide the indicator (dots). There are demos on that page for how to use with vanilla javascript, angular, or vue.
It makes use of DKCarouselView for iOS and ViewPager for Android.
You can also hook onto the slide tap and change events easily enough, which is all in the demo usage instructions.
We have a web app that is used with iPads and iPhones. We are using FastClick (https://github.com/ftlabs/fastclick) to eliminate the 300ms wait time for mobile/tablet users.
This makes everything snappier, but the interaction with the chart (using SVG rendering) is spotty. Sometimes tapping works, sometimes not. ​Users need to be able to do normal chart interactions like tap a point to see the value and toggle series on/off in the legend. If I disable FastClick, chart tapping works fine.
FastClick has a built-in way to bypass an element. You add the "needsclick" CSS class, and it leaves that element alone. I put this CSS class on the div the chart is rendered in, but each clickable element in the chart apparently also needs to have the "needsclick" class added to it.
Is this possible?
I gave up. I added "needsclick" to all SVG elements after the chart rendered, and the iPad clicking was still really weird. Sometimes it worked, but not consistently.
I think these libraries are both trying to solve the same problem and stepping on each other to do it, so I removed FastClick.
This was with FastClick 1.0.6 and Kendo UI v2015.1.408.
I am trying to replicate this demo:
https://www.polymer-project.org/components/core-animated-pages/demos/grid.html
I want to use a waterfall-tall header panel instead. If I just change the mode of the scroll header panel, it doesn't collapse because the scrollable div is not the one expected.
Which would be the best way to have this demo working in the same way with a waterfall-tall header?
I tried having the animated pages scrollable instead but the hero transition is then messed up.
Best,
Nicolas
I need to implement scrolling in my application developed with Kinetic.
I see two options:
Put the main div inside another div and use the scroll bars of the browser.
Perform the scroll funcionality with kinetick.
Considering that I have to add zoom functionality (which will change the scroll bars), what do you think will be the best way?.
Thank you very much.